首页/CSS代码外包/css居中代码 css垂直居中代码 css 图片居中代码

css居中代码 css垂直居中代码 css 图片居中代码

发布-xiaoming | 浏览量-

CSS各种居中方法

水平居中的text-align:center 和 margin:0 auto
 
这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响,否则一切都是无用功。margin:0 auto
也可以被写成margin:0 auto 0 auto。不能理解的童鞋们可以自己去找找关于css缩写的内容。
 
水平居中
子元素为行内元素
父元素设置text-align:center
子元素设置为行内元素,如display:inline-block /*子元素内文字也会居中*/
 
 
子元素为块状元素
子元素为块状元素,设置margin: 0 auto
 
用CSS3+position定位
父元素position: relative
子元素position: absolute再加left: 50%;transform: translateX(-50%)  /*低版本IE不兼容CSSS3新属性*/
 
 
用margin+position定位
子元素加一个兄弟元素
子元素position: absolute;left: 50%;/*子元素的左边界在页面中央*/
兄弟元素margin-left: -50%;width: 100%;/*移动中轴线到中央*/
 
div垂直居中
CSS3+position定位
父元素position: relative
子元素position: absolute再加top: 50%;transform: translateY(-50%)  /*低版本IE不兼容CSSS3新属性*/
 
 
tabel-cell+verticle-align /*兼容到IE8*/
父元素设置display: table-cell; vertical-align: middle;
 
 
文本垂直居中
table-cell
div设置display: table
文本设置diaplay: table-cell;verticle-align: middle
 
line-height+height /*适用于定高*/
设置line-height与height相等
 
 
inline-block
#div{text-align:center; overflow: auto; } /*仅用于单行文本*/
#div:before {content:'';display:inline-block;vertical-align:middle;height:100%;width:0; }
 
flex /*兼容到IE10*/
水平居中
设置父元素display: flex;justify-content: center;
垂直居中
设置父元素display: flex;align-items: center;
 

css 如何让图片垂直居中

 

css样式大全 css样式表

css常用代码大全

 
div层绝对底部代码推荐
 
div层页面居中css代码|css页面居中代码

 

原文地址:http://www.35ui.cn/post/20150930410.html

标签css居中div

上一条: html 空格 html空格代码怎么打
下一条: css鼠标样式 css鼠标经过样式

或许你还对下面的文章感兴趣