CSS 是一种定义样式结构如字体, 颜色, 位置等的语言, 被用于描述网页上的信息格式化和现实的方式. CSS 样式可以直接存储于 html 网页或者单独的样式单文件.
CSS 的样式居中总结
一, 父容器宽度确定时水平居中
(1) 通过 margin: 0 auto; 和 text-align: center 实现 CSS 水平居中.
这种方法是实现 CSS 水平居中最最常用的, 我在前端开发中大概有 60% 的 CSS 水平居中就是通过 "margin: 0 auto; text-align: center" 实现的.
(2) 通过 display:flex 实现 CSS 水平居中.
随着越来越多兼容 flexbox, 所以通过 "display:flex" 实现 CSS 水平居中的方案也越来越受青睐.
通过 display:flex 实现 CSS 水平居中的原理是父元素 display:flex;flex-direction:column; 而子元素 align-self:center; 这个跟 CSS 垂直居中的原理是一样的, 只是在 flex-direction 上有所差别, 一个是 row(默认值), 另外一个是 column.
(3) 通过 display:table-cell 和 margin-left 实现 CSS 水平居中.
对于父元素和子元素的宽度都确定的情况, 适合通过 display:table-cell 和 margin-left 实现 CSS 水平居中. 使用时, 父元素 display:table-cell, 子元素给剩余宽度一半的 margin-left.
(4) 通过 position:absolute 实现 CSS 水平居中.
这种方法跟上一个方法适用场景一样, 也是适用于父元素和子元素的宽度都确定的情况. 使用时, 父元素 position:absolute, 子元素给剩余宽度一半的 margin-left.
(5) 通过 width:fit-content 实现 CSS 水平居中.
这种方法可以确保子元素宽度不确定的情况下, 也能实现 CSS 水平居中. 需要注意的是, 需要配合 "margin: 0 auto; text-align: center" 使用.
二, 父容器宽度不确定时水平居中
- (1)position:relative:left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);// 这里的 50% 是指盒子本身的 50%;
- (2) width:fit-content;width:-moz-fit-content;width:-webket-fit-content;margin:auto;
三, 水平垂直居中
(一) 脱离文档流元素
1,margin:auto 法
CSS 代码:
- div{
- width: 300px;
- height: 300px;
- position: relative;
- border: 1px solid #465468;
- }
- img{
- position: absolute;
- margin: auto;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
HTML 代码:
- <div>
- <img src="prince.png">
- </div>
(2) 负 margin 法
CSS 代码:
- .container{
- width: 500px;
- height: 400px;
- border: 2px solid #379;
- position: relative;
- }
- .inner{
- width: 480px;
- height: 380px;
- background-color: #746;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -190px; /*height 的一半 */
- margin-left: -240px; /*width 的一半 */
- }
HTML 代码:
- <div class="container">
- <div class="inner"></div>
- </div>
(二) 未脱离文档流元素的居中
(1)table-cell 法
- div{
- border: 3px solid #555;
- width: 300px;
- height: 200px;
- display: table-cell;
- vertical-align: middle;
- text-align: center;
- }
- span{
- vertical-align: middle;
- }
HTML 代码:
- <div>
- <span > 这是放在 span 中的文字,
通过外层 div 设置 display: table-cell 以及 vertical-align: middle 实现垂直居中.</span>
</div>
(2) 弹性盒子法
CSS 代码:
- .container{
- width: 300px;
- height: 200px;
- border: 3px solid #546461;
- display: -webkit-flex;
- display: flex;
- -webkit-align-items: center;
- align-items: center;
- -webkit-justify-content: center;
- justify-content: center;
- }
- .inner{
- border: 3px solid #458761;
- padding: 20px;
- }
HTML 代码:
- <div class="container">
- <div class="inner">
我在容器中水平垂直居中
- </div>
- </div>
推荐: CSS 文档 https://www.html.cn/book/css/
来源: http://www.css88.com/qa/css3/14106.html