水平居中
1.对于行内元素(display: inline, inline-block, inline-table, inline-flex;),我们一般用text-align: center;如果有多个子元素都是行内元素,那我们可以直接在父元素设置。
常见的标签有:<a>标签可定义锚,<abbr>表示一个缩写形式,<acronym>定义只取首字母缩写,<b>字体加粗,<bdo>可覆盖默认的文本方向,<big>大号字体加粗,<br>换行,<cite>引用进行定义,<code>定义计算机代码文本,<dfn>定义一个定义项目,<em>定义为强调的内容,<i>斜体文本效果,<img>向网页中嵌入一幅图像<input>输入框,<kbd>定义键盘文本,<label>标签为,<input> 元素定义标注(标记),<q>定义短的引用,<samp>定义样本文本,<select>创建单选或多选菜单,<small>呈现小号字体效果,<span>组合文档中的行内元素,<strong>语气更强的强调的内容,<sub>定义下标文本,<sup>定义上标文本,<textarea>多行的文本输入控件,<tt>打字机或者等宽的文本效果,<var>定义变量。注意:这些都是设置在父元
2.对于块级元素(display: block),我们一般用margin: 0 auto;设置在当前元素。
常见的标签有:<caption>定义表格标题,<dd>定义列表中定义条目,<div>定义文档中的分区或节,<dl>定义列表,<dt>定义列表中的项目,<fieldset>定义一个框架集,<form>创建 HTML 表单,<h1>定义最大的标题,<h2>定义副标题,<h3>定义标题,<h4>定义标题,<h5>定义标题,<h6>定义最小的标题,<hr>创建一条水平线,<legend>元素为 ,<fieldset>元素定义标题,<li>标签定义列表项目,<noframes>为那些不支持框架的浏览器显示文本,于 frameset 元素内部,<noscript>定义在脚本未被执行时的替代内容,<ol>定义有序列表,<ul>定义无序列表,<p>标签定义段落,<pre>定义预格式化的文本,<table>标签定义 HTML 表格,<tbody>标签表格主体(正文),<td>表格中的标准单元格,<tfoot>定义表格的页脚(脚注或表注),<th>定义表头单元格,<thead>标签定义表格的表头,<tr>定义表格中的行。
垂直居中
1.对于行内元素
如果是单行文字,可以设置文字line-height等于其父元素height的方式。
如果是多行,可以设置父元素上下相同的padding来实现,
还可以使用display:table来实现
主要实现代码:
display: table使块状元素成为一个块级表格;
display: table-cell;子元素设置成表格单元格;
vertical-align: middle;使表格内容居中显示,即可实现垂直居中的效果;
2.对于块级元素
如果height固定
.parent {
position: relative;
}
.child { position: absolute; top: 50%; height: 100px; margin-top: -50px; }
如果height不固定
.parent { position: relative; }
.child { position: absolute; top: 50%;
transform: translateY(-50%);}
垂直水平都居中
除了用上面的组合之外
还可以如下:
固定宽高
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; height:100px; margin: -50px 0 0 -50px; }
不固定宽高
.child { position: absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
或.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
flex水平居中
.parent {
display: flex;
justify-content: center;
}
flex垂直居中
.parent {
display: flex;
align-items: center;
}
flex水平垂直居中
.parent {
display: flex;
justify-content: center;
align-items: center;
}
参考文档:http://ife.baidu.com/note/detail/id/1549