网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中_html/css_WEB-ITnose

flex实现子块的完美居中

方案

父块使用display:flex属性,子块margin自适应即可实现

代码

index.html

                        ff      

方案

使用transform:translate属性来调整

代码

index.html

            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae obcaecati expedita ducimus, rem laborum veniam qui quo facilis enim. Repellat blanditiis nemo, magnam, sequi illum perferendis consequatur modi maiores quaerat?

方案

定义居中元素的父元素justify-content和align-items属性为center即可,需要设置足够的高度,不然只有水平居中效果

代码实现

index.html

                            啦啦德玛新亚