css实现水平 垂直居中

  css实现水平居中

    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
        .box1{
            border: 1px solid #000;
            text-align: center;
        }
        .box2{
            display: inline-block;
            background-color: green;
        }
        /*...............................*/
        .box3{
            border: 1px solid #000;
        }
        .box4{
            display: table;
            margin: 0 auto;
            background-color: yellow;
        }
        .box5{
            width: 100px;
            margin: 0 auto;
            text-align: center;
        }
        /*...............................*/
        .box6{
            display: flex;
            justify-content: center;
            border: 1px solid #000;
        }
        .box7{
            background-color: blue;
        }

        .box8{
            display: flex;
            border: 1px solid #000;
        }
        .box9{
            margin: 0 auto;
            background-color: pink;
        }
        /*..............................*/
        .tip1{
            position: relative;
            height: 20px;
            border: 1px solid #000;
        }
        .tip2{
            position: absolute;
            left: 50%;
            /*margin-left: -50%;*/
            transform: translateX(-50%);
            background-color: gray;
        }
    </style>
</head>
<body>
<!-- 思路1:子元素变为行内块,给父级元素text-align:center; -->
    <div class="box1">
        <div class="box2">
            水平居中
        </div>
    </div>
    <!-- 思路2:给要居中的元素display:table;
    然后给他一个margin: 0 auto;(如果这个元素有固定宽度的话,直接给margin: 0 auto;) -->
    <div class="box3">
        <div class="box4">
            水平居中
        </div>
        <div class="box5">
            水平居中
        </div>
    </div>
    <!-- 思路3:使用弹性盒子模型flex实现水平居中【IE9不支持】 -->

    <!-- a.在伸缩容器上设置主轴对齐方式justify-content:center; -->
    <div class="box6">
        <div class="box7">
            水平居中
        </div>
    </div>
    <!-- b.在伸缩项目上设置margin:0 auto; -->
    <div class="box8">
        <div class="box9">
            水平居中
        </div>
    </div>
    <!-- 思路4:通过设置绝对定位偏移量和translateX(-50%)居中 -->
    <div class="tip1">
        <div class="tip2">水平居中</div>
    </div>-->
</body>
</html>

  在chrome中显示:

  css实现垂直居中

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
        .box1{
            line-height: 30px;
            height: 30px;
            border: 1px solid #000;
        }
        /*..........................*/
        .box2{
            border: 1px solid #000;
            display: table-cell;
            height: 100px;
            vertical-align: middle;
        }
        .box3{
            background-color: red;

        }
        .box4{
            line-height: 100px;
            font-size: 0;
            border: 1px solid #000;
            background-color: #ccc;
        }
        img{
            vertical-align: middle;
            width: 50px;/*给图片一个宽度,他高度也会按比例确定*/
        }
        /*.....................................*/
        .box5{
            position: relative;
            border: 1px solid #000;
            height: 100px;
        }
        .box6{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .box7{
            position: relative;
            border: 1px solid #000;
            height: 300px;
        }
        .box8{
            position: absolute;
            top: 0;
            bottom: 0;
            height: 100px;
            margin: auto 0;
            border: 1px solid #000;
        }
        /*...............................*/
        .tip1{
            display: flex;
            align-items: center;
            height: 100px;
            border: 1px solid #000;
        }
        .tip3{
            display: flex;
            border: 1px solid #000;
            height: 100px;
        }
        .tip4{
            margin: auto 0;
        }
    </style>
</head>
<body>
    <!-- 思路1:line-height实现单行文本垂直居中 -->
    <div class="box1">
        垂直居中
    </div>
    <!-- 思路2:设置vertical-align:middle实现垂直居中 -->
    <!-- a.给父元素设置display:table-cell(单元格)再给父元素设置vertical-align:middle;使子元素实现垂直居中。【注意;一旦给父元素设置为table-cell,就不能给他浮动或绝对定位,因为浮动或绝对定位会使元素具有块级元素特性,从而丧失了table-cell元素具有的垂直对齐的功能。若需要浮动或绝对定位处理,则需要外面再套一层div】 -->
    <div class="box2">
        <div class="box3">
            垂直居中
        </div>
    </div>
    <!-- b.若子元素是图片,通过设置父元素的行高来代替高度,且设置父元素的font-size为0。

  给子元素设置vertical-align:middle。他的解释是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的,且各个字体的字符X的高低位置不一致。  所以,当字体大小较大时,这种差异就更明显。当font-size为0时,相当于把字符X的字体大小设置为0,于是可以实现完全的垂直居中 -->
    <div class="box4">
        <img src="img/qiao.jpg" />
    </div>

    <!-- 思路3:通过绝对定位实现垂直居中 -->
    <!-- 【1】配合translate()位移函数
     translate函数的百分比是相对于自身高度的,所以top:50%配合translateY(-50%)可实现居中效果
    [注意]IE9-浏览器不支持
    [注意]若子元素的高度已知,translate()函数也可替换为margin-top: 回退自身高度的50%; -->
    <div class="box5">
        <div class="box6">垂直居中</div>
    </div>
    <!-- 【2】若子元素定高,结合绝对定位的盒模型属性,实现居中效果 -->
    <div class="box7">
        <div class="box8">
            垂直居中
        </div>
    </div>
    <!-- 思路4:使用弹性盒模型flex实现垂直居中
    [注意]IE9-浏览器不支持 -->
    <!-- 【1】在伸缩容器上设置 display:flex;侧轴对齐方式align-items: center -->
    <div class="tip1">
        <div class="tip2">垂直居中</div>
    </div>
    <!-- 【2】在伸缩项目上设置margin: auto 0 -->
    <div class="tip3">
        <div class="tip4">垂直居中</div>
    </div>
</body>
</html>

  在chrome中显示:

    css实现水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直都居中</title>
    <style>
        .box1{
            border: 1px solid #000;
             line-height: 20px;
             text-align: center;
             width: 1000px;
        }
        /*.......................................*/
        .box2{
            border: 1px solid #000;
            width: 200px;
            height: 100px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        .box3{
            display: inline-block;

        }

        .box4{
            border: 1px solid #000;
            line-height: 100px;
            font-size: 0;
            text-align: center;
            width: 300px;
            background-color: gray;
        }
        img{
            vertical-align: middle;
            width: 50px;
        }
        /*.........................................*/
        .box5{
            border: 1px solid #000;
            width: 300px;
            height: 100px;
            display: table-cell;
            vertical-align: middle;
        }
        .box6{
            display: table;
            margin: 0 auto;
        }
        /*...........................................*/
        .box7{
            border: 1px solid #000;
            width: 300px;
            height: 100px;
            position: relative;
        }
        .box8{
            width: 100px;
            height: 50px;
            position: absolute;
            margin: auto;
            border: 1px solid #000;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .tip1{
            position: relative;
            border: 1px solid #000;
            height: 100px;
        }
        .tip2{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        .tip3{
            position: relative;
            border: 1px solid #000;
            height: 100px;
            width: 300px;
        }
        .tip4{
            position: absolute;
            width: 100px;
            height: 50px;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -50px;
            border: 1px solid #000;
        }
        /*/*........................................*/
        .tip5{
            display: flex;
            border: 1px solid #000;
            width: 300px;
            height: 100px;
        }
        .tip6{
            margin: auto;
        }
        .tip7{
            border: 1px solid #000;
            width: 300px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .tip8{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <!-- 思路1:text-align:center和line-height实现单行文本垂直水平居中。 -->
    <div class="box1">
        垂直水平居中
    </div>

    <!-- 思路2: text-align + vertical-align
【1】在父元素设置text-align和vertical-align,并将父元素设置为table-cell元素,子元素设置为inline-block元素 -->
    <div class="box2">
        <div class="box3">垂直水平居中</div>
    </div>
<!-- 【2】若子元素是图像,可不使用table-cell,而是其父元素用行高替代高度,且字体大小设为0。子元素本身设置vertical-align:middle -->
    <div class="box4">
        <img src="img/qiao.jpg" />
    </div>

    <!-- 思路3:margin+vertical-align
    要想在父元素中设置vertical-align,须设置为table-cell元素;要想让margin:0 auto实现水平居中的块元素内容撑开宽度,须设置为table元素。而table元素是可以嵌套在tabel-cell元素里面的,就像一个单元格里可以嵌套一个表格 -->
    <div class="box5">
        <div class="box6">垂直水平居中</div>
    </div>

    <!-- 思路4:使用absolute
    【1】利用绝对定位元素的盒模型特性,在偏移属性为确定值的基础上,设置margin:auto -->
    <div class="box7">
        <div class="box8">垂直水平居中</div>
    </div>
    <!-- 【2】利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果
    [注意]IE9-浏览器不支持 -->
    <div class="tip1">
        <div class="tip2">垂直水平居中</div>
    </div>
    <!-- 【3】在子元素宽高已知的情况下,可以配合margin负值达到水平垂直居中效果(最常用) -->
    <div class="tip3">
        <div class="tip4">垂直水平居中</div>
    </div>
    <!-- 思路5:使用flex -->
    <!-- 1.在伸缩项目上使用margin:auto -->
    <div class="tip5">
        <div class="tip6">垂直水平居中</div>
    </div>
    <!-- 【2】在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items -->
    <div class="tip7">
        <div class="tip8">垂直水平居中</div>
    </div>
</body>
</html>

    在chrome中显示:

  

时间: 2024-12-30 18:14:35

css实现水平 垂直居中的相关文章

CSS制作水平垂直居中对齐 多种方式各有千秋

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

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

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

CSS制作水平垂直居中对齐

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

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

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

css各种水平垂直居中

css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line-height: 100px; } 效果:http://runjs.cn/code/rmjiq3a8 padding垂直居中缺点,内容不确定时,高度不好固定 .item{ padding: 40px 0; } 效果:http://runjs.cn/code/hg5yrpm8 margin垂直居中 需要

CSS实现水平垂直居中小结

版权声明:本文为博主原创文章,未经博主允许不得转载. 水平居中 水平居中实现只要设置margin:0 auto;就可以实现 <code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined

CSS实现水平垂直居中方式

1.定位 核心代码实现请看示例代码中的注释: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>CSS水平垂直居中实现方式--定位实现</title> <style type="text/css"> *{ margin: 0; padding: 0; } .p{ /*父元

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

css布局--水平垂直居中

1. 使用text-align 和 vertical-align 和 inline-block实现水平垂直居中 html <div class="parent"> <div class="child">使用vertical-align,text-align,inline-block实现水平垂直居中</div> </div> css .parent{ vertical-align: middle; text-align: