css设置居中的方案总结

  回想一下,自己平时项目里遇到的比较多的就是css如何让元素居中显示,其实差不多每种情况都遇到过,所采用的方法也都各有利弊,下面对这些方法来做个概括,对其中的坑点,也会一一指出来,希望能给遇到问题的同学一些参考:

一、水平居中

01 行内元素 text-align: center;

.parent {
   text-align: center;
}

02 块级元素 margin: auto;

注意:低版本的浏览器还需要设置text-align:center;

.parent {
    text-align: center;
}
.child {
    margin: auto;
    border: 1px solid blue;
}

二、垂直居中

01 行内元素(单行文字垂直居中):设置 line-height = height;

.parent {
   height: 200px;
   line-height: 200px;
   border: 1px solid red;
}

02 块级元素:绝对定位(需要提前知道尺寸)

优点:兼容性不错

缺点:需要提前知道尺寸,可拓展性和自适应性不好

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    background: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

03 块级元素:绝对定位 + transform

优点:不需要提前知道尺寸
缺点:兼容性不好,只支持ie9+浏览器,而且还会引发一些其他的奇怪的兼容问题

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

04 块级元素:绝对定位 + margin: auto;

优点:不需要提前知道尺寸,兼容性好
缺点:我目前还没有遇到。
此方法出自张鑫旭老师的博客,我也是了解了之后,才运用到实际开发中的

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: blue;
}

05 块级元素:padding

缺点:如果高度固定,需要提前计算尺寸(只在某些特定情况适用)。

.parent {
    padding: 5% 0;
}
.child {
    padding: 10% 0;
    background: blue;
}

06 块级元素:display: table-cell

父元素一定要设置display:table,这样子元素的table-cell才能生效

.parent {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
}

07 块级元素:display: flex(移动端页面推荐)

缺点:兼容性不好

.parent {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;  /*水平居中*/
}
.child {
    background: blue;
}

08 块级元素:伪元素

这个方案是从张鑫旭大神的新书:《css世界》里读到的

vertical-align这个属性需要与同元素内的行内元素的基线为参考,高度100%自然就以高度50%处即平常所说的中线为基线,middle默认对齐其基线,自然也就垂直居中对齐了

.parent {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}
.child {
    background: blue;
    width: 100px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.parent::before {
    content: ‘‘;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

09 块级元素:inline-block

HTML代码:

<div class="parent">
    <div class="child">child</div>
    <div class="brother">brother</div>
</div>

CSS代码:

.parent {
    width: 400px;
    height: 400px;
    border: 1px solid red;
    position: relative;
}
.child, .brother {
    display: inline-block;
    vertical-align: middle;
}
.child {
    background: blue;
    font-size: 12px;
}
.brother {
    height: 400px;
    font-size: 0;
}

其他

table布局是十年前前端最常用的布局方式,最省心但是冗余也很多,结构嵌套也比较深。现在前端变化日新月异,不推荐使用

<table>
     <tr>
         <td align="center" valign="middle">content</td>
     </tr>
 </table>

希望上述的总结对相关的同学能起到参考性的作用。

原文地址:https://www.cnblogs.com/bettermu/p/8438105.html

时间: 2024-11-14 13:22:29

css设置居中的方案总结的相关文章

6 种CSS设置居中的方法

原文 Demos of each of the methods below by clicking here. Horizontal centering with css is rather easy. When the element to be centered is an inline element we use text-align center on its parent. When the element is a block level element we give width

几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等

1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即可. 2)position值为relative时(绝对定位),css设置属性    text-align:center; left:50%;  margin-left:-500px;(左边距margin-left设置为当前div宽度的一半的负值即可). 代码示例: .page { position:

关于HTML+CSS设置图片居中的方法

有的时候我们会遇到这样一个问题,就是当我们按下F12进行使用firebug调试的时候,我们发现图像没有居中,页面底下有横向的滑动条出现,图片没能够居中,默认状态下只是紧靠在页面最左侧,而我们对图像缩小的时候,图像依然紧靠在页面最左侧,所有我们需要对图像设置居中,无论放大或者缩小页面,都使得图像至始至终都显示在页面的中间. 代码如下 HTML: <html> <head> </head> <body> <div class="backgroun

CSS元素居中

html中元素分为行内元素和块级元素.采用margin或者float来使元素居中,是比较常见的方法. margin:0 auto只能用于块级元素,不能使行内元素居中. 参考知乎上为什么「margin:auto」可以让块级元素水平居中?,margin:0 auto,是左右外边距自适应,水平方向的 auto,其计算值取决于可用空间(剩余空间).元素本身为块级元素,那么水平方向可用空间的距离为其包含盒的宽度(宽度=盒总宽度-(padding-left+padding-right+border-left

利用CSS实现居中对齐

1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: 1 <div class="parentDiv"> 2 这里随意填写~... 3 </div> 1.1 实现文字水平居中(使用text-align) 对div.parentDiv设置text-align: center;来实现.CSS代码如下: 1 [css] 2 3 .parentDiv { 4 width:200px; 5 height:100p

css图片居中(水平居中和垂直居中)

http://www.51xuediannao.com/html+css/htmlcssjq/css_img_center.html css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍 css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上c

05使用CSS设置字体和文本样式

使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|serif|sans-serif name表示字体名称,可指定多种字体,用空格隔开.按优先顺序排列.如果字体名称包含空格,则应该使用括号()括起来. font是一个复合属性,所谓复合属性是指该属性能够设置多种字体属性,用法如下: font:font-style||font-variant||font-we

DIV CSS固定宽度居中实例

DIV CSS固定宽度居中布局实例 在布局一个网页时,非常重要的是一般网页主体布局都是水平居中的,其实就是对最外的DIV层设置居中布局,这时布局居中就是我们这里要介绍关键点. DIV布局水平居中,关键使用CSS单词为margin:0 auto.解释:DIV对象外边距左右为自动适应距离(根据对象设置宽度样式自动判断浏览器除去设置宽度后剩下宽度左右自动对等自然就实现布局居中),上下间距为0px. 关键实例CSS代码: body{ text-align:center} .box{ margin:0 a

css完全居中

关于css完全居中的文章,网上已经很多了.这里主要记录一下思路,方便记忆,最后附上所有的参考链接. 1  水平居中 1  内部是内联元素,那么我们直接可以在父元素上面设置,text-align:center. 2 有多个内联元素,排成一排,实现水平居中. html代码: <div class="container"> <div>1</div> <div>2</div> <div>3</div> <