css实现居中布局
水平居中:
块级元素:设置宽度且设置margin:0 auto;
行内元素:设置text-align: center;
垂直居中 :
行内元素:设置 line-height 和 height 相等
块级元素:父元素设置相对布局
已知高度:子元素设置绝对布局 top: 50%;,再设置 margin-top为负的二分之一自身高度;
未知高度:子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
水平垂直居中 (前面两种方法父元素需设置相对布局) :
定高定宽:先设置绝对布局 top: 50%; left: 50%; 再为子元素设置二分之一自身高、宽度的负 margin-top
和margin-left;
高度和宽度未知:先用绝对布局 top: 50%; left: 50%;,再设置 transform: translate(-50%, -50%);
Flex布局:为父元素设置display:flex; justify-content: center; align-items: center;