css实现元素水平垂直居中

xiaoxiao2021-02-28  126

记录两个思路,当然还有其他方法,如果用到再补充:

测试文字

1.在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

.parent{

display: flex;

justify-content: center;

align-items: center;}

2.使用position:absolute;

(1)不考虑子元素和父元素的宽高

.parent{ position:relative; } .child{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }

(2)子元素宽高固定

.parent{ position: relative;} .child{ position: absolute; top: 50%; left: 50%; width: 80px; height: 60px; margin-left: -40px; margin-top: -30px;}

3.

text-align + line-height实现单行文本水平垂直居中

.test{ text-align: center; line-height: 100px;}
转载请注明原文地址: https://www.6miu.com/read-83818.html

最新回复(0)