CSS中关于居中的问题

水平居中

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

 

转载于:https://www.cnblogs.com/yuyezhizhi/p/10942837.html