css居中小结

水平居中

1. 行内元素的水平居中

直接设置其父元素

.ourter{ text-align: center; }

无论有几个行内元素，一行代码便可搞定，so easy~

2. 块级元素的水平居中

也很是简单呐
设置该块级元素

div{ margin: 0 auto; }

可是！可是！若是该元素的position为absolute的话，该方法会失效。
我是这样理解的：margin为auto即至关于外边距的值是自动的，相对的，因此在绝对定位下将失效。不过仍是能够将其margin设为具体数值滴。

垂直居中

有不少关于垂直居中tricks,博主在这里只介绍一些比较简单经常使用的
若是对高度没有要求的哈

1. 行内元素的垂直居中

1）若是对父元素的高度没有具体的要求的话，将父元素的padding-top padding-bottom设置为相同的值便可。

.outer{
padding-top: 60px; padidng-bottom: 60px; width：300px; height: auto; /*注意：此时父元素的height不能是具体数值*/ }

2）若是要求父元素的高度为具体数值时，且确保行内元素不会换行时，能够设置line-height等于父元素的高度

.outer{ width: 300px; height: 200px; line-height: 200px; /*text-align: center; */ }

此时，便可实现行内元素的垂直居中。若把最后一行加上，便可同时实现水平和垂直居中。
可是！！！必定要确保不会换行，也就是只有一行。
3）在保持父元素具体数值宽度不变且有不止一行时，可使用一点小tricks,好比

.outer{
text-align: center;
height: 200px; width: 300px; } .outer::before{ content: " "; height: 100%; width: 1%; display: inline-block; vertical-align: middle; } /*html代码以下*/ <div id="outer"> <span>span1</span> <span>span2</span> </div>

可是，注意：由于vertical-align是指行内元素的基线相对于该元素所在行的基线的垂直对齐方式，因此该方法只对行内元素有效
效果：

2. 块级元素的垂直居中

1）若是已知子元素的高度，能够这样

.outer{
position: relative; } .inner{ height：50px; width:50px; position: absolute; top: 50%; margin-top: -25px; }

注意子元素和父元素的position，切记父元素的position是relative

2）若是不知道子元素的具体高度，能够利用css的transform属性，对1）进行小改动，以下：

.outer{ position: relative; } .inner{ width:50px; position: absolute; top: 50%; transform: translateY(-50%); }

3）但以上两种方式对于有多个块级子元素的状况就不适用了，好比，这样的状况

这时咱们能够用一个div把全部子元素包裹起来，变成一个子元素，而后就能够继续使用上面的方法了。

** 最最后！上面的全部方法都是在不使用flex的前提下的才使用的！解决居中问题最爽的固然是flex布局啦，O(∩_∩)O~~ **
什么？！还不会使用flex布局？赶忙点下面~

flex布局学习总结
使用flex，管它是行内元素仍是块级元素，管它有几个元素，通通搞定！
举个栗子！
实现多个块级元素的垂直加水平居中

.outer{ display: flex; justify-content: center; align-items: center; flex: 0 0 auto; /* flex-direction: column; */ }

效果图以下:

若是加上最后一行，则竖直排列子元素，即：

是否是很简便腻~O(∩_∩)O哈！