Simonecss怎么设置多行垂直居中
的有关信息介绍如下：
css在设置多行垂直居中之前，我们要先区分行内元素与块状元素的区别，然后分别针对具体的需求情况（内元素或块状元素）来做出正确的代码功能，本文中分别针对行内元素、块状元素进行设置多行垂直居中的讲解
新建一个html页面，首先，将页面（多行元素）的基本结构写出来：
例子：
多行水平垂直居中
多行水平垂直居中
多行水平垂直居中
多行水平垂直居中
多行水平垂直居中
给容器#container添加css样式，要让行内元素垂直居中，必须已知容器的宽高；对于行内元素我们可以用display：table，无需知道行内元素的宽高
css：
#container{
margin:20px auto;
background: #ccc;
position: relative;
width:900px;
height:600px;
display: table;
}
给行内元素添加样式：display：table-row 让行内元素垂直居中；
然后再添加水平居中样式：text-align: center;
如果需要让行内元素的文字也垂直居中的话，就根据容器的高度（600px）分成五等分，即120px；添加样式：line-height:120px;
CSS:
#container span{
display: table-row;
text-align: center;
line-height: 120px;
}
首先，将页面的多个块状元素的基本结构写出来，如下：
使用弹性盒子
弹性盒子将父级元素设置为（注意兼容性）：
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:box;
控制子元素的方向，让子元素竖排：
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-orient:vertical;
CSS:
.test3{
width:800px;
margin:30px auto;
height:600px;
border: 10px solid #ccc;
padding: 10px;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:box;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-orient:vertical;
}
给子元素设置宽高：
.test3 div{
width:100px;
height:100px;
background: red;
border: 1px solid #fff;
}
效果如图：
根据父级元素的高度、子元素的高度及每一子元素有1px的边框，600-100*5-2*5=90；然后将90分成六等分，即：15px，给子元素添加样式：margin: 15px auto 0 auto;
子元素CSS样式：
.test3 div{
width:100px;
height:100px;
background: red;
border: 1px solid #fff;
margin: 15px auto 0 auto;
}
效果如图：
