CSS 元素垂直居中
来源:互联网 发布:ubuntu 开机自启动脚本 编辑:程序博客网 时间:2024/04/29 01:46
1.对于固定宽高的元素居中
<h3>固定宽高居中</h3><div class="wrapper"> <div class="content"> <span>content</span> </div></div>
/** 固定宽高div居中*/.wrapper { width: 200px; height: 200px; border: 1px solid #cccccc; margin: 10px auto; position: relative; box-shadow: -5px 0 20px #999, 5px 0 20px #999, 0 -5px 5px #999, 0 5px 5px #999;}.content { width: 100px; height: 50px; border: 1px solid #cccccc; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -25px; text-align: center;}.content span { display: block; line-height: 50px;}如图带阴影的外层容器是一个div,内层有一个小的div,小div内部有一个span元素。对于这种父容器与子容器的宽高都是确定的布局,可以将父容器设置为相对定位,子容器设为绝对定位。然后将子容器分别向下向左浮动父容器的50%。但这时会使子容器的上边框和左边框分别居于父容器的垂直方向的中间和水平方向的中间,所以我们需要将子容器分别再向左偏移子容器宽度的一半,向上偏移子容器高度的一半。这样子容器就刚好位于父容器的中间了。
上图中示例中我们看到内容为content的span元素也位于其父元素的中间,对于这种单行行内元素有一个小技巧可以使其在父元素的垂直方向上居中,即设置其行高等于父级容器。这种垂直居中只对单行行内元素有效,一般我们可以用这种方式让一个连接式按钮的文本垂直居中,这种方式就很方便。
2.父容器和子元素宽高不定
一些情况下,容器和父元素的宽高均是不确定的,这时采用第一种方法就无法实现居中效果了。可以采用下面的方式实现居中效果。为父容器添加伪选择器:before,并将子元素的display属性设为inline-block。来看具体的样式和布局文件。
/*父容器*/.second-wrapper { width: 300px; height: 300px; margin: 10px auto; border: 1px solid #cccccc; position: relative; text-align: center; box-shadow: 5px 5px 5px #999;}/*为父容器添加的伪选择器*/.second-wrapper:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em;}/*子元素*/.second-content { padding: 50px; border: 1px solid #cccccc; display: inline-block; vertical-align: middle; width: 50%;}
<h3>宽高不定,但元素必须是inline-block</h3><div class="second-wrapper"> <div class="second-content"> <p> 内部元素 </p> </div></div>实现效果
这里可以将父元素的宽高设置为任何值,子元素的宽高也可以为任何值,都可以将其居中显示。
3.宽高 利用display为table的属性使元素居中
/*利用display的table属性,将父容器dispaly属性设置为table,子元素的display属性设置为table-cell然后使用vertical-align,text-align分别是元素垂直水平居中*/.third-wrapper { width: 300px; height: 300px; margin: 10px auto; border: 1px solid #cccccc; position: relative; text-align: center; box-shadow: 5px 5px 5px #999; display: table;}.third-content { display: table-cell; vertical-align: middle;}
<h3>宽高不定,利用table属性</h3><div class="third-wrapper"> <div class="third-content"> hello world </div></div>
0 0
- CSS 元素垂直居中
- css元素垂直居中
- css定高行级元素垂直居中
- css定高块级元素垂直居中
- Css实现元素的垂直居中
- css 所有元素垂直、水平居中
- Css实现元素的垂直居中
- CSS代码使任何元素垂直居中
- css实现元素的垂直居中
- CSS元素水平垂直居中方案总结
- CSS之元素水平/垂直居中问题
- CSS 元素垂直居中的 方法总结
- css实现元素水平垂直居中
- Css让容器内多个元素垂直居中
- css 元素水平垂直居中总结
- css 元素垂直居中的问题
- CSS 幽灵元素方案垂直居中注意事项
- CSS实现子元素垂直居中对齐
- SCU2016-01 L 集合容斥原理
- ts码流解析工作总结
- HighChart前后台封装,构造个性化图表插件highChartTools,快捷创建各种图表
- 解决ListView的item含有RadioGroup,滑动错乱问题,从国外大神博借鉴过来的
- UNITY 5.3.3 发行说明 中文版
- CSS 元素垂直居中
- js闭包的简单理解
- RxJava 驯服数据流之副作用
- 200_让PieChart动态设置分块
- Android编码规范
- Matlab中numel的用法
- matlab避免用eval的方法
- Java FlowLayout、BorderLayout、GridLayout、GridBagLayout、CardLayout布局管理器
- SCU2016-01 N dijkstra