1.水平居中
1).行内元素:
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。
如下代码:
html代码:
<body> <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示。</div> </body>
css代码:
<style> div.txtCenter{ text-align:center; } </style>
2).定宽块状元素:
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中;
html代码:
<body> <div>我是定宽块状元素,哈哈,我要水平居中显示。</div> </body>
css代码:
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>
也可以写成:
margin-left:auto; margin-right:auto;
注意:元素的“上下 margin” 是可以随意设置的。
3).不定宽块状元素:
不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):
a.加入 table 标签;
b.设置 display;inline 方法;
c.设置 position:relative 和 left:50%;
2.垂直居中
1).父元素高度确定的单行文本:
<div class="container"> hi,imooc! </div>
css代码:
<style> .container{ height:100px; line-height:100px; background:#999;} </style>
2).垂直居中方法:
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
table td{height:500px;backgroud:#ccc}
方法二:
对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle来实现居中,对不支持display:table-cell的ie6和ie7,使用特定格式的hack。