水平居中,垂直居中,水平垂直居中 方法大全

废话不多说, 直接上菜。

  菜系:水平居中

    菜名一: 行内(块)元素水平居中

    1. 通过 text-align: center 可以实现在块级元素内部的行内元素水平居中。

    2. 如果块级元素内部包着也是一个块级元素,我们可以先将其由块级元素改变为行内块元素(inline-block、inline-table、inline-flex、inline-grid),再通过设置行内块元素居中以达到水平居中。

  

    菜名二: 块级元素水平居中

    1. 将该块级元素左右外边距margin-leftmargin-right设置为auto

    

    2. 使用absolute+transform

    先将父元素设置为相对定位,再将子元素设置为绝对定位,向右移动子元素,移动距离为父容器的一半,最后通过向左移动子元素的一半宽度以达到水平居中。

    

    需要注意的点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀。

    3. 使用flex+justify-content

    通过CSS3中的弹性布局flex中的justify-content属性来达到水平居中。父子元素都可以。

    

    4. 使用flex+margin

    通过flex将父容器设置为为FLEX布局,再设置子元素居中。

    

    菜名三: 多块级元素水平居中

    1. 使用flex布局

    利用弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(默认横轴)方向上的对齐方式,本例中设置子元素水平居中显示。

    

    2. 使用inline-block

    将水平排列的块状元素设为display:inline-block,然后在父级元素上设置text-align:center

    

    菜名四: 绝对定位元素水平居中

    通过子元素绝对定位,外加margin: 0 auto来实现。

    

     菜系: 垂直居中

    菜名一:行内元素垂直居中

    1. 利用行高line-height

    

    2. 利用flex布局

    利用flex布局实现垂直居中,其中flex-direction: column定义侧轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。

    

    3. 利用表布局(table)

    利用表布局的vertical-align: middle可以实现子元素的垂直居中。

    

    菜名二: 块级元素垂直居中

    1. 使用absolute+负margin(已知宽高)

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

    

    2. 使用absolute+transform(未知宽高)

    通过CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

    

    3. 使用flex+align-items

    通过设置flex布局中的属性align-items,使子元素垂直居中。

    

    4. 使用table-cell+vertical-align

    通过将父元素转化为一个表格单元格显示(类似 <td> 和 <th>),再通过设置 vertical-align属性,使表格单元格内容垂直居中。

    

    

    菜系三: 水平垂直居中

    1. 绝对定位与负边距实现(已知宽高)

    这种方式需要知道被垂直居中元素的高和宽,才能计算出margin值,兼容所有浏览器。

     

    2. 绝对定位与margin:auto(已知宽高)

    这种方式无需知道被垂直居中元素的高和宽,但不能兼容低版本的IE浏览器。

    

    3. 绝对定位+CSS3(未知元素的高宽)

    利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。
    CSS3的transform固然好用,但在项目的实际运用中必须考虑兼容问题,大量的hack代码可能会导致得不偿失。【移动端除外】

    

    4. flex布局

    利用flex布局,其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。不能兼容低版本的IE浏览器。

    

    5. flex/grid+margin:auto

    容器元素设为 flex 布局或是grid布局,子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器

    

    赶快动手试试吧!

原文地址:https://www.cnblogs.com/erwinyong/p/10525141.html

时间: 2024-10-16 08:09:16

水平居中,垂直居中,水平垂直居中 方法大全的相关文章

解读CSS布局之-水平垂直居中

原文链接:http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/ 对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有兼容需要,可以参见这篇文章:http://www.cnblogs.com/Dudy/p/4085292.ht

转载:解读CSS布局之-水平垂直居中(1)

本文转自http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/,以及大地dudy的博客http://www.cnblogs.com/Dudy/p/4085292.html. 对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有

《转》CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)

转自大地Dudy的CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳) 本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说的IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法: <!doctype html> <html lang="en&

css 实现元素水平垂直居中总结5中方法

个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 1 <div id="divAuto">margin,text-align;水平居中</div> 1 /* 2 margin:0 auto; 设置块元素(或与之类似的元素)的水平居中 3 text-align:center;设置文本或img标签等一些内联对象(或与之类似的元素)的水平居中 4 line-hei

使元素相对于窗口或父元素水平垂直居中的几种方法

如果一个元素具有固定或相对大小,要使其不管如何调整窗口大小或滚动页面,始终位于浏览器窗口中间,可使用如下方法: <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title><meta charset="utf-8&q

水平垂直居中方法总结

工作中经常用到水平垂直居中的方法,尤其是垂直居中,其中有非常多的学问,一直疏于总结,今天儿周末,来review一下: HTML结构: <div class="container"> <div class="content"></div> </div> .container{ background-color: #4EA46A; height: 200px; width:80%; } .content{ height:1

转 CSS制作水平垂直居中对齐各种方法总结

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处

CSS元素水平垂直居中方法总结(方法主要来自大漠以及张鑫旭博客)

以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"&g

div盒子水平垂直居中的方法

这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不近能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义transform: translate(-50%,-50%)  必须加上 top: 50%; left: 50%; 优点: 1.      内容可变高度 2.      代码量少 缺点: 1.      IE8不支持 2.      属性需要写浏览器厂商前缀 3.      可能干扰其他transf