100字范文 > CSS将元素水平居中垂直居中水平垂直居中的方法总结

CSS将元素水平居中垂直居中水平垂直居中的方法总结

时间：2020-02-18 17:05:23

前言

在实际开发中，经常会遇到要将页面上某个盒子元素水平居中、垂直居中或者水平垂直居中的情况，需要居中的元素类型不同，采用的方法也不一样，下面就一起看看实现不同类型元素居中的方法吧

水平居中

行内元素

父元素text-align: center;

<style>#parent {text-align: center;}</style><div id="parent"><span>我是行内元素</span></div>

块级元素

宽度固定

元素本身margin: 0 auto;

根据CSS规范：如果 margin-left 和 margin-right 值均为auto，则它们的使用值相等。这使元素在父元素中水平居中

<style>#child {width: 100px;height: 100px;margin: 0 auto;}</style><div id="parent"><div id="child"></div></div>

宽度不定

父元素position: relative;
元素本身position: absolute; left: 50%; transform: translateX(-50%);

当然，在宽高已知的情况下也可以使用这种方式，这里是想说明宽高未知时应该使用这样的方法

<style>#parent {position: relative;}#child {position: absolute;left: 50%;transform: translateX(-50%);}</style><div id="parent"><div id="child">宽高未知</div></div>

flex布局

父元素display: flex; justify-content: center;

<style>#parent {display: flex;justify-content: center;}</style><div id="parent"><div id="child">我是flex items</div></div>

垂直居中

行内元素

单行

父元素height: xxx; line-height: xxx;line-height = height

<style>#parent {line-height: 200px;}</style><div id="parent"><span>我是行内元素，只有一行</span></div>

多行

父元素display: table-cell; vertical-align: middle;

<style>#parent {display: table-cell;vertical-align: middle;}</style><div id="parent"><span>我是行内元素我是行内元素我是行内元素我是行内元素我是行内元素</span></div>

块级元素

高度固定

父元素position: relative;
元素本身position: absolute; top: 50%; margin-top: -本身height/2

<style>#parent {position: relative;}#child {width: 100px;height: 100px;position: absolute;top: 50%;margin-top: -50px;}</style><div id="parent"><div id="child"></div></div>

高度不定

父元素position: relative;
元素本身position: absolute; top: 50%; transform: translateY(-50%);

<style>#parent {position: relative;}#child {position: absolute;top: 50%;transform: translateY(-50%);}</style><div id="parent"><div id="child">我是块级元素，宽高未知</div></div>

flex布局

父元素display: flex; align-items: center;

<style>#parent {display: flex;align-items: center;}</style><div id="parent"><div id="child">我是flex items</div></div>

水平垂直居中

行内元素

父元素display: table-cell; vertical-align: middle; text-align: center;

<style>#parent {display: table-cell;vertical-align: middle;text-align: center;}</style><div id="parent"><span id="child">我是行内元素</span></div>

块级元素

宽高固定

父元素position: relative;
元素本身position: absolute; top: 50%; left: 50%; margin-top: -本身height/2; margin-left: -本身width/2;

<style>#parent {position: relative;}#child {width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;}</style><div id="parent"><div id="child"></div></div>

父元素position: relative;
元素本身position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;

<style>#parent {position: relative;}#child {width: 100px;height: 100px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;/* auto必须在知道剩余空间的情况下给子元素周围分配空间 */margin: auto;}</style><div id="parent"><div id="child"></div></div>

宽高不定

父元素position: relative;
元素本身position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);

<style>#parent {position: relative;}#child {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}</style><div id="parent"><div id="child">我是块级元素，宽高不定</div></div>

flex布局

父元素display: flex; justify-content: center; align-items: center;
无论想要居中的元素是什么性质，都可以利用flex布局来实现居中效果

<style>#parent {display: flex;justify-content: center;align-items: center;}</style><div id="parent"><div id="child">我是flex items</div></div>

补充

position:absolute 是元素相对于第一个定位非 static 的祖先元素的位置
top / right / bottom / left取值是相对于该祖先元素的宽高来说的
top: 50% 表示此时子元素的左上角在父元素的垂直方向居中。若想让子元素垂直居中，则需要将子元素的垂直中点移到父元素的垂直方向居中位置，所以此时需要将子元素向上移动自身 height 的一半。其它方向同理