CSS实现居中
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">1、</span>水平居中</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.1 要居中的是内联元素<span style="color: black;">或</span>行内-块级元素？（<span style="color: black;">例如</span>文字或链接）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 块级父元素设置text-align为center则其内内联元素水平居中。This will work for inline, inline-block, inline-table, inline-flex, etc.</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.2 要居中的是块级元素？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 设定了宽度的块级元素（不设定宽度将会自动铺满那就不<span style="color: black;">必须</span>水平居中啦）：把该元素的margin-left和 margin-right 都设置成auto来实现水平居中。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.3 一行内不止一个块级元素？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.3.1 <span style="color: black;">倘若</span>在一行内有两个或多个块级元素<span style="color: black;">必须</span>水平居中，得为它们设置<span style="color: black;">区别</span>的display类型。/* <span style="color: black;">办法</span>1-将这些块级元素设置display为inline-block，再将其父容器设置text-align为center*/ /* <span style="color: black;">办法</span>2-直接给父容器设置成flex布局，再将justify-content属性设置成center*/</p>1.3.2 <span style="color: black;">倘若</span>是多个块级元素依次堆在上一个的顶部，那margin auto策略还是奏效的。
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">2、</span>垂直居中</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.1 要居中的是内联元素<span style="color: black;">或</span>行内-块级元素？（<span style="color: black;">例如</span>文字或链接） </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.1.1 是单行？ </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.1.1.1单行的内联元素只需将上下padding设置成等值就<span style="color: black;">能够</span>实现垂直居中。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.1.1.2 在某些<span style="color: black;">不可</span><span style="color: black;">运用</span>padding的<span style="color: black;">状况</span>下，并确定是不换行的文本，则<span style="color: black;">能够</span>使用line-height等于height的<span style="color: black;">办法</span>来使单行文本内容垂直居中。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.1.2 是多行？</p> 2.1.2.1 给多行文本设置上下等大的padding<span style="color: black;">亦</span><span style="color: black;">能够</span>使其垂直居中。但<span style="color: black;">倘若</span>此法不奏效，则有可能是文字在的元素<span style="color: black;">成为了</span>table cell，<span style="color: black;">此时</span>候就要用<a style="color: black;">vertical-align</a>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">来<span style="color: black;">处理</span>问题。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.1.2.2 <span style="color: black;">倘若</span>table-like<span style="color: black;">已然</span>过时<span style="color: black;">不消</span>了，用flexbox是更佳<span style="color: black;">方法</span>。一个flex-child<span style="color: black;">能够</span>很容易在flex-parent里实现居中（父容器<span style="color: black;">必要</span>有个固定高度px、%等）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.1.2.3 除去以上两种<span style="color: black;">办法</span>，你还<span style="color: black;">能够</span><span style="color: black;">运用</span>幽灵元素技巧"ghost element" technique，在这种技术中，容器内<span style="color: black;">安置</span>一个完全高度的伪元素，并且文本与此垂直对齐。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.2 要居中的是块级元素？ </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.2.1 该块级元素高度已知</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 你<span style="color: black;">知道</span><span style="color: black;">晓得</span>元素的高度，则<span style="color: black;">能够</span>像下面<span style="color: black;">这般</span>来垂直居中：/* 元素相对其父容器顶部50%的位置 */ / * 元素的margin-top设置为负(<span style="color: black;">自己</span>height*0.5)*/</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.2.2 该块级元素高度未知</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 相对父容器顶部50%定位，再纵向回移<span style="color: black;">自己</span>高度的50%即tramsform: translateY(-50%)，<span style="color: black;">就可</span>实现垂直居中。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.2.3 <span style="color: black;">是不是</span>介意该元素撑开其父容器高度？</p> <span style="color: black;">倘若</span>不介意，那只需<span style="color: black;">运用</span>tables或CSS display使元素变成tables再使<a style="color: black;">vertical-align</a>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为middle就能实现垂直居中。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.2.4 你要用flexbox吗？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> <span style="color: black;">运用</span>flex布局<span style="color: black;">能够</span>很<span style="color: black;">容易</span>实现垂直居中：align-items: center;</p> <span style="color: black;">或</span><span style="color: black;">经过</span>flex-direction: column;将默认横向的主轴改为垂直方向，起点在上沿。并justify-content: center;<span style="color: black;">亦</span><span style="color: black;">能够</span>。
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">3、</span>垂直水平居中</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.1 该元素的宽高固定吗？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在将元素绝对定位为top: 50%; left: 50%;后，<span style="color: black;">能够</span><span style="color: black;">运用</span>值为宽的一半和高的一半的负margin实现垂直水平居中。（跨浏览器支持很不错）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.2 该元素宽高未知？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（1）<span style="color: black;">倘若</span>宽高未知，在将元素绝对定位为top: 50%; left: 50%;后，<span style="color: black;">能够</span>使用transform属性来做负的50%移动（基于当前元素宽高）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）<span style="color: black;">亦</span><span style="color: black;">能够</span>元素相对父容器绝对定位(left: 0;right: 0;top: 0;bottom: 0;)并margin: auto，不<span style="color: black;">必须</span>提前<span style="color: black;">晓得</span>尺寸兼容性好。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.3 你要用flexbox吗？</p>对flexbox进行垂直水平居中
你的见解真是独到，让我受益良多。 外链论坛的成功举办，是与各位领导、同仁们的关怀和支持分不开的。在此，我谨代表公司向关心和支持论坛的各界人士表示最衷心的感谢！ 顶楼主，说得太好了！ 外链论坛的成功举办，是与各位领导、同仁们的关怀和支持分不开的。在此，我谨代表公司向关心和支持论坛的各界人士表示最衷心的感谢！ 百度seo优化论坛 http://www.fok120.com/ 谷歌外贸网站优化技术。 楼主的文章深得我心，表示由衷的感谢！
页:
[1]