【css】居中方案

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了【css】居中方案相关的知识,希望对你有一定的参考价值。

参考技术A 前言:根据最近学习的课程,简单总结一下学习到的css左右布局以及居中方案。后期学习深入之后再回来进行css居中的完整总结。

给所有子元素添加 float: left ,给父元素加 clearfix 类,清除浮动
html:

css:

将内联元素外部的块级元素的 text-align 设置为 center ,即可实现内联元素( inline 、 inline-block )的水平居中。

演示

将固定宽度的块级元素的 margin-left 和 margin-right 设置为 auto ,即可实现块级元素的水平居中。

演示

将每个块级元素的 display 设置为 inline-block ,然后将它们的父容器的 text-align 设置为 center ,即可使多个块级元素水平居中。

演示

设置内联元素的行高( line-heigt )和内联元素的父元素的高度( height )相等,且内联元素的字体大小远小于行高,即可使内联元素垂直居中。

演示

通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,即可实现垂直居中。

演示

借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中

演示

AndroidIOS文字居中偏离的解决方案

前言

移动端开发,经常会遇到的问题,就是文字居中。一般都只能往css方向去fix这个问题。
自己以前也用过position:relative;top:-*px的方式去解决。??
后来才发现,原来不是css的问题,是浏览器在渲染象形文字时,就已经错误了。
本文参考自知乎回答,用来总结如何填上这个坑~

一、css文字居中

先总结下,前端开发中,常用的文字居中技巧。

  • 常规方法
height:20px;
line-height:20px;

  • table-cell方式
<p class="text-wrap">
    <span class="text">文字居中</span>
</p>
.text-wrap{
    display:table;
}
.text{
    display:table-cell;
    vertical-align:middle;
}

  • position方式
<p class="text-wrap">
    <span class="text">文字居中</span>
</p>
.text-wrap{
    position:relative;
    height:20px; /* 必须设置一个高度,一般取文字高度 。因为内容abs定位后,高度为0*/
}
.text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

  • flex方式
<p class="text-wrap">
    <span class="text">文字居中</span>
</p>
.text-wrap{
    display:flex;
    justify-content:center; /* 左右居中 */
    align-items:center; /* 上下居中 */
}

二、为什么Android、IOS应用css居中不起效

因为文字在content-area内部渲染的时候就已经偏移。css的居中方案都是用来控制整个content-area的居中而已,对content-area内部不会产生实质性的影响。
导致这个问题的本质原因可能是Android在排版计算的时候参考了primyfont字体的相关属性(即HHead Ascent、HHead Descent等)。
primyfont字体的确定,是依据font-family里哪个字体在fonts.xml里第一个匹配上。
原生Android下中文字体是没有family name的,导致匹配上的字体始终不是中文字体。所以渲染的时候出现偏差。
那么,解决这个问题就要在font-family里显式申明中文,或者通过什么方法保证所有字符都fallback到中文字体。

三、解决方案

1.针对Android 7.0+设备:上设置 lang 属性:,同时font-family不指定英文。

比较常用的是设置font-family: sans-serif

这个方法是利用了浏览器的字体fallback机制,让英文也使用中文字体来展示。blink早期的内核在fallback机制上存在问题,Android 7.0+才能ok,早期的内核下会导致英文fallback到Noto Sans Myanmar,这个字体非常丑。

2.针对MIUI 8.0+设备:设置font-family: miui

这个方案就是显式申明中文的方案,MIUI在8.0+上内置了小米兰亭,同时在fonts.xml里给这个字体指定了family name:miui,所以我们可以直接设置。

另外,腾讯的IMWeb团队也给出了解决方案,但亲测,治标不治本。还是上述方案较为完美地解决。

参考

[1] [Android浏览器下line-height垂直居中为什么会偏离](https://www.zhihu.com/question/39516424) -- 周祺回答
[2] [Android 浏览器文本垂直居中问题](http://imweb.io/topic/5848d0fc9be501ba17b10a94) -- IMWeb解决方案









以上是关于【css】居中方案的主要内容,如果未能解决你的问题,请参考以下文章

CSS居中方案大全

CSS水平居中+垂直居中+水平/垂直居中的方法总结

css垂直居中方案

CSS-居中方法汇总

CSS居中方案-----超全

用CSS 实现元素垂直居中,都有哪些好的方案