CSS-居中
2019-06-05 22:23
1311 查看
水平居中
1. 定宽的块级元素,外边距
当被设置元素为定宽块级元素时,可以用外边距实现。
<div class="parent" > <div class="child" >demo</div> </div>
.child{ width:200px; margin:0 auto; }
2.行内元素
当被设置元素为行内元素时,可以使用此方法,不是时可以先将元素变为行内元素。再将父容器设置
text-align: center;
<div class="parent" > <div class="child" >demo</div> </div>
.parent { text-align: center; } .child{ display:inline-block; }
3.绝对定位
被设置元素设为绝对定位,父容器设为相对定位
<div class="parent" > <div class="child" >demo</div> </div>
.parent { width: 400px; height: 400px; position: relative; } .child{ position: absolute; left: 50%; transform: translateX(-50%); }
4.Flex
Flex,意为弹性布局,用来为盒状模型提供最大的灵活性。可以简便完整响应式地实现各种页面布局。
任何一个容器都可以指定为Flex布局,行内元素也可以。
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
具体有关Flex的介绍可以看https://www.geek-share.com/detail/2747549128.html
<div class="parent" > <div class="child" >demo</div> </div>
.parent { display:flex; justify-content:center; } .child{ width:100px; }
垂直居中
1. 内边距
父元素不设高度。
<div class="parent"> <span>111111</span> </div>
.parent{ padding: 100px 0; width:100px; }
2. 行高 line-height
子元素是行内元素,父元素设置line-height
<div class="parent"> <span class="child">111111</span> </div>
.parent{ height:100px; line-height:100px; }
3. table
<div class="parent"> <div class="child">111111</div> </div>
.parent{ width: 100px; height: 100px; display: table; } .child{ display: table-cell; vertical-align: middle; }
4. 定位
被设置元素设为绝对定位,父容器设为相对定位
<div class="parent" > <div class="child" >demo</div> </div>
.parent { width: 400px; height: 400px; position: relative; } .child{ position: absolute; top: 50%; transform: translateY(-50%); }
5. Flex
<div class="parent" > <div class="child" >demo</div> </div>
.parent { display: flex; align-items: center; height: 200px; } .child{ }
相关文章推荐
- css居中补充
- 【Web前端】CSS div居中显示
- CSS 居中方法集锦
- CSS 设置水平居中 垂直居中
- 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略
- CSS实现垂直居中的几种方法
- 如何垂直居中对齐CSS[转载]
- CSS垂直水平完全居中手册
- Css设置img属性让图片水平居中,居左,居右
- Css实现元素的垂直居中
- CSS居中布局方案
- CSS中水平居中的inline-height 和 vertical-align:middle;
- css图片在div内上下居中的方法
- css中absolute使用,用position和transform是div里面的div垂直居中
- css div水平居中
- DIV+CSS如何让文字垂直居中?
- div+css实现Firefox和IE6兼容的垂直居中
- css学习笔记之水平居中
- CSS图片文字居中
- CSS - 实现图片垂直居中,文字垂直居中