也谈CSS的水平居中，垂直居中

前端开发，凡是需要去写页面的同学（听说有的公司，已经分化出有人写js,有人写页面），都会遇到这个问题。

因为最近在一天聊天聊到这个，除了常用的，所以这里再次对相关问题做一个梳理。

水平居中

.main{
  width:90%
 margin:0 auto //auto
}

.center{
  width: 960px;
position: absolute;
left: 50%;
margin-left: -480px;/*此值等于“-width/2”*/
}

inline-block属性是无法让元素水平居中，关键之处要在元
素的父容器中设置text-align的属性为“center”。

CSS3的flex实现水平居中方法

CSS3的fit-content实现水平居中方法

垂直居中

.book{
 padding:11px 0 //通过padding调整 // 多行文本居中
}

.vertical{
 vertical-align: middle;
}

.book-text{
 height: 16px;
line-height:16px;
}

这几篇文章中总结了很多方式
https://www.w3cplus.com/css/vertically-center-content-with-css
https://www.w3cplus.com/css%2520/img-vertically-center-content-with-css
空白标签实现图片的垂直居中
https://www.w3cplus.com/css/elements-horizontally-center-with-css.html
浮动实现水平居中的方法