水平居中:
1.text-aligin:center
如果仅使用 text-aligin:center 是无法达到水平居中的效果的,为什么?
text-aligin:center 需要在行内块元素上使用的,而盒子是块级元素,所以,需要将盒子转换为行内块元素 text-aligin:center 才能生效。
<div style="text-align: center;">
<div style="display: inline-block;"></div>
</div>
2. display:flex
<div style="display: flex;justify-content: center;">
<div></div>
</div>
3.position(子元素绝对定位,父元素相对定位) ,由于子元素有width属性,所以left:50%会导致子元素往右偏,因此需要往左 半个子元素 的宽度
<div style="position: relative;">
<div style="position: absolute; left: 50%; margin-left: -100px;"></div>
</div>
4.margin-auto
<div style="overflow: hidden">
<div style="margin: auto;"></div>
</div>
参考https://blog.csdn.net/qq_53985958/article/details/125510763
垂直居中:
1.table-cell
<div style="display: table-cell;vertical-align: middle;">
<div></div>
</div>
2.display:flex
<div style="display: flex;justify-content:center;align-items:Center;">
<div></div>
</div>
3. position 子绝对 父相对(与上面一样,要负子元素宽度的一半)
<div style="position:relative;">
<div style="position: absolute;
margin-top:-25px;top:50%
"></div></div>
参考https://m.php.cn/faq/473645.html
标签:居中,常用,center,text,top,元素,aligin,css From: https://www.cnblogs.com/luzanzan/p/17509180.html