前端开发，凡是需要去写页面的同学（听说有的公司，已经分化出有人写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
浮动实现水平居中的方法
网友评论