美文网首页
水平和垂直居中问题

水平和垂直居中问题

作者: 123674585508575 | 来源:发表于2018-01-30 15:23 被阅读0次

  水平居中

水平居中的对象分为三类:行内元素,定宽块状元素,不定宽块状元素。
行内元素:如果被设置元素为文本,图片等行内元素时,水平居中是通过给父元素设置text-align:center来实现的。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>水平居中</title> 
        <style>
            div{
                width: 300px;
                background-color: yellow;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>
            <p>小仙女小王子<br>
            小仙女小王子<br>
            小仙女小王子<br></p>
        </div>
    </body>
</html>
QQ截图20180130124420.jpg

定宽块状元素:被设置元素为块状元素,且元素的宽度固定。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>水平居中</title> 
        <style>
            .div1{
                width: 80px;
                background-color: yellow;
                height: 80px;
            }
            .div2{
                height: 40px;
                background-color: red;
                //下面的两条语句缺一不可。    
                width: 40px;
                margin:auto;
            }
        </style>
    </head>

    <body>
        <div class="div1">
            <div class="div2">
            </div>
        </div>
    </body>
</html>
QQ截图20180130135827.jpg

不定宽块状元素(有三种方法):被设置的元素是块状,但宽度不定。
方法一:加入table标签
第一步:为需要设置居中的元素外面加入一个table标签(包括<tbody><tr><td>).
第二步:为这个table设置margin:auto属性。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>水平居中</title> 
        <style>
            .div1{
                width: 80px;
                background-color: yellow;
                height: 80px;
            }
            .div2{
                height: 40px;
                background-color: red;
            }
            table{
                margin: auto;
            }
        </style>
    </head>

    <body>
        <div class="div1">
            <table><tbody><tr><td>
            <div class="div2">3
            </div>
            </td></tr></tbody></table>
        </div>
    </body>
</html>
image.png

方法二
改变块级元素的display为inline类型(设置为行内元素显示),然后为其父元素设置text-align:center来实现居中效果。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>水平居中</title> 
        <style>
            .div1{
                width: 80px;
                background-color: yellow;
                height: 80px;
                text-align: center;
            }
            .div2{
                height: 40px;
                background-color: red;
                display: inline;
            }
        </style>
    </head>

    <body>
        <div class="div1">
            <div class="div2">3
            </div>
        </div>
    </body>
</html>
image.png

方法三:设置浮动和相对定位来实现
通过给父元素设置float属性,然后给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>水平居中</title> 
        <style>
            .div1{
                width: 60px;
                height: 60px;
                background-color: yellow;
            }
            .div2{
                float: left;
                position: relative;
                left: 50%;
            }
            .div3{
                position: relative;
                left: -50%;
            }
        </style>
    </head>

    <body>
        <div class="div1">
        <div class="div2">
            <div class="div3">天
            </div>
        </div>
        </div>
    </body>
</html>
image.png
水平居中讲解到此完毕,下面开始讲垂直居中

垂直居中

垂直居中的对像分为三种:
1.父元素高度确定的单行文本。
2.父元素高度确定的多行文本以及图片等的竖直居中。
3.让存于div中的图片和文字同时并排垂直居中。
第一种:通过设置父元素的height和line-height高度一致来实现的。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>水平居中</title> 
        <style>
            .div1{
                width: 300px;
                height: 60px;
                line-height: 60px;
                background-color: yellow;
            }
            
        </style>
    </head>

    <body>
        <div class="div1">
            <p>往往娃地方士大夫打开</p>
        </div>
    </body>
</html>
image.png

第二种:有两种方法。
方法一(兼容性差):为父元素设置vertical-align:middle和display:table-cell

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>水平居中</title> 
        <style>
            .div1{
                width: 100px;
                height: 150px;
                background-color: yellow;
                vertical-align: middle;
                display: table-cell;
            }
            
        </style>
    </head>

    <body>
        <div class="div1">
            <p>往往娃地方士大夫打开</p>
        </div>
    </body>
</html>
image.png

方法二:使用插入table(包括<tbody><tr><td>)标签,同时为<td>标签设置vertical-align:middle属性(vertical-align属性也可不设置,因为<td>标签默认vertical-align为middle)。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>水平居中</title> 
        <style>
            .div1{
                width: 100px;
            }
            td{
                height:100px;
                background:#ccc;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <table><tbody><tr><td>
        <div class="div1">
            <p>往往娃地方士大夫打开</p>
        </div>
        </td></tr></tbody></table>
    </body>
</html>
image.png

第三种:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度属性</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
 
        body {
            padding: 0 10px;
        }
 
        .line {
            font-size: 20px;
            border-bottom: 1px solid #dddddd;
        }
 
        .line img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-right: 20px;
        }
        //方法一
        .methodOne {
            padding: 20px 0;
        }
         
        .methodOne span {
            line-height: 80px;
            vertical-align: top;
        }
        //方法二
        .methodTwo {
            display: flex;
            height: 120px;
            align-items: center;
        }
        //方法三       
        .methodThree {
            padding: 20px 0;
        }
         
        .methodThree * {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="line methodOne">
        <img src="./img/logo.png" alt="图片"/>
        <span>我是文字</span>
    </div>
    <div class="line methodTwo">
        <img src="./img/logo.png" alt="图片"/>
        <span>我是文字</span>
    </div>
    <div class="line methodThree">
        <img src="./img/logo.png" alt="图片"/>
        <span>我是文字</span>
    </div>
</body>
</html> 

  水平垂直都居中

1.让div等块级元素水平和垂直都居中,即永远处于屏幕的正中央,当我们做如登录块时非常有用!(这块是抄别人的)
原文链接:https://www.cnblogs.com/hafiz/p/5492409.html

实现一、原理:要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该div等块级元素分别左移和上移,左移和上移的大小就是该div等块级元素宽度和高度的一半。

CSS代码:

.mycss{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px
}

相关文章

  • 水平和垂直居中问题

      水平居中 水平居中的对象分为三类:行内元素,定宽块状元素,不定宽块状元素。行内元素:如果被设置元素为文本,图片...

  • 动态设置div css属性

    jQuery实现水平和垂直居中 jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取D...

  • CSS display: table-cell 用于水平垂直居中

    CSS display: table-cell 用于水平垂直居中 在 CSS 设置居中时候,水平和垂直居中的设置略...

  • 页面布局居中问题

    css页面布局水平垂直居中问题 居中问题

  • 水平居中和垂直居中

    水平居中和垂直居中在写静态页面时常用的css样式,下面总结一下关于水平和垂直居中,希望对给位朋友有所帮助。(如有遗...

  • 前端面试题 笔记 CSS篇

    CSS 居中( 目前知道的居中方式)水平和垂直居中 行内元素和块级元素text-align:center,行高弹性...

  • html+css,让div水平垂直居中的几种方式

    在web前端开发中经常需要使用到让div进行水平和垂直居中的技术,现在我们就来谈谈如何实现div水平垂直居中(如下...

  • 前端开发之CSS实现在网页正中间显示的弹出层

    一直以来,让前端工程师头疼的问题肯定包括垂直居中这个问题吧,什么文字垂直居中,图片垂直居中之类的,很头疼对不对,如...

  • CSS水平和垂直居中

    一、内联元素 1. 定义: 在html中, 、 、 、 和 就是典型的内联元素(行内元素)(inline)元素...

  • 设置居中样式

    在css中居中效果可以分为:水平居中、垂直居中、水平垂直居中三种。最近小程序开发项目中也经常遇到居中效果设置问题,...

网友评论

      本文标题:水平和垂直居中问题

      本文链接:https://www.haomeiwen.com/subject/mttczxtx.html