20170808-csscentering
时间：2023-03-30 21:53:32
CSS
水平居中内联或类内联元素水平居中在块级父容器集合text-align:centerblock-levelelementshorizo??ntallycenteringblock-levelelementssetmargin-leftandmargin-righttoauto（前提是元素设置了Width）flex布局实现（多个水平排列的元素）水平居中显示：flex;justify-content:center;flex布局实现（多个垂直排列的元素）水平居中显示：flex；flex-direction：column；对齐项目：居中；绝对定位实现水平居中width：宽度值；位置：绝对；左：50%；转换：translateX(-50%)；或margin-left：宽度值的一半；垂直居中单行内联元素或者将父容器的height和line-height设置为相同的值height:50px;行高：50px；使用table-cell实现多行文本垂直居中React起源于Facebook的内部项目，用于搭建Instagram的网站，2013年5月开源。React具有高性能，代码逻辑很简单。越来越多的人开始关注和使用
.container{width:200px;高度：200px；边框：1px实心；显示：表格单元格；vertical-align:middle;}使用flex实现垂直居中显示：flex;弹性方向：列；证明内容：居中；或显示：flex；对齐项目：居中；使用伪元素实现垂直居中
React起源于Facebook内部项目，用于搭建Instagram网站，2013年5月开源。React性能高，代码逻辑非常简单。越来越多的人开始关注和使用
注意：在上面的例子中，必须为p元素设置宽度，并且宽度必须小于父容器宽度。容器{宽度：200px；高度：200px；边框：1px实心；text-align:center;}.containerp{width:190px;显示：内联块；vertical-align:middle;}.container:after{content:"";显示：内联块；高度：100%；宽度：0；vertical-align:middle;}绝对定位实现垂直居中position:absolute;top:50%;transform:translateY(-50%);或margin-top:-自身高度的一半；
