目录
前言水平居中行内元素块级元素宽度固定宽度不定 flex布局 垂直居中行内元素单行多行 块级元素高度固定高度不定 flex布局 水平垂直居中行内元素块级元素宽高固定宽高不定 flex布局 补充前言
在实际开发中,经常会遇到要将页面上某个盒子元素水平居中、垂直居中或者水平垂直居中的情况,需要居中的元素类型不同,采用的方法也不一样,下面就一起看看实现不同类型元素居中的方法吧
水平居中
行内元素
父元素
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 的一半。其它方向同理
translate
位移是相对于元素本来的位置,所以其取值都基于元素本身宽高