美文网首页
使Html元素水平垂直居中的几种方法

使Html元素水平垂直居中的几种方法

作者: MC桥默 | 来源:发表于2020-05-06 23:27 被阅读0次

前言

项目中往往需要使得元素上下左右都居中,即水平垂直居中,我想即使是菜鸟前端工程师也会略知一二种解决方法。需要居中的元素有的有固定高度,此类元素的居中容易解决,还有另外一种情况,就是需要居中的元素高度不固定(高度由元素中的文字或图片等元素决定),此文主要列举了几种使元素水平垂直居中的方法。

一、元素高度固定

方法1

定位 ,50%,margin负距

.box{
width: 400px;
height: 300px;
border: 2px solid black;
/* 把元素变成定位元素 */
position: absolute;
/* 元素距离上,左都为50% */
left: 50%;
top: 50%;
/* 让元素的左外边距,上外边距为元素宽高的1/2 注意margin是负距*/
margin-top: -150px;
margin-left: -200px;
}

图解:


方法一.png
方法2

定位,四个方向为都为0 ,margin:auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            width: 100vw;
            height: 100vh;
            background: #eee;
            overflow: hidden;
            position: relative;
        }
        .container > div{
            width: 30vw;
            height: 30vw;
            border: 1px solid black;
            background: yellow;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
    </div>
</body>
</html>

图解


方法二.png
方法三

使用伪元素 利用inline-block与vertical-align配合伪元素达到垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .dialog_container {
            text-align: center;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.35);
        }
        /* 伪元素上下居中 */
        .dialog_container:after {
            display: inline-block;
            width: 0;
            height: 100%;
            content: "";
            vertical-align: middle;
            background: red;
        }
        /* 真正居中的元素 */
        .dialog_box {
            display: inline-block;/*只有inline-block,inline和table可以使用vertical-align:middle*/
            vertical-align: middle;
            width: 50%;
            height: 50%;
            background: yellow;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container dialog_container">
        <div class="dialog_box"></div><!--需要居中的元素-->
    </div>
</body>
</html>

二、元素高度不固定

方法一

使用transform: translate()使元素偏移到中间位置

.box2 {
position: absolute;
left: 50%;
top: 50%;
/* 设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)*/
transform: translate(-50%, -50%);
}
方法二

使用flex布局,此方法在本人简书关于flex布局的文章里面有所提及

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            width: 100vw;
            height: 100vh;
            background: #eee;
            overflow: hidden;
            display: flex;
        }
        .container > div{
            width: 30vw;
            height: 30vw;
            border: 1px solid black;
            background: yellow;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
    </div>
</body>
</html>
方法三

使用display:flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div{
            width: 580px;
            height: 180px;
            background: grey;
            margin: 0 auto;

            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="div">
        <div>dsafadsds</div>
        <div>5655</div>
    </div>
</body>
</html>

相关文章

  • 使Html元素水平垂直居中的几种方法

    前言 项目中往往需要使得元素上下左右都居中,即水平垂直居中,我想即使是菜鸟前端工程师也会略知一二种解决方法。需要居...

  • css 水平垂直居中实现方式

    css 水平垂直居中实现方式 水平垂直居中包括行内元素居中,以及块级元素居中 行内元素html结构 块级元素结构 ...

  • 网页布局各种居中问题的详解

    水平居中 行内元素水平居中 块级元素水平居中 多个块级元素水平居中 解决方法之一: 解决方法之二: 垂直居中 单行...

  • CSS实现水平垂直的几种方法

    目录 水平居中 垂直居中 水平垂直居 一、水平居中 内联元素和块级元素实现水平居中的方法不一样,其中块级元素又分定...

  • css居中方式总结(亲测有效)

    水平居中(行内元素水平居中、块级元素水平居中) 垂直居中 水平垂直居中 行内元素水平居中 text-align: ...

  • 关于水平垂直居中的问题

    文字水平居中 文字水平垂直居中 设置padding高度自动撑开 flex 子元素在父元素中水平垂直居中 方法一 ...

  • 2020前端面试经历

    html 1.如何使一个元素垂直水平居中(ps:知道几种就说几种) 2.浏览器的渲染机制 3.一个页面中展示很多图...

  • CSS实现元素水平与垂直居中

    1.子元素水平垂直居中 效果 方法一 方法二 方法三 全部代码 2.父元素水平垂直居中 效果 方法一 3.内联元素...

  • css关于居中的方式

    父元素没有固定宽高 水平垂直居中 html: css: 水平居中 不确定子元素宽高 设置水平居中,先将子元素转化为...

  • css3 元素居中的几个方法

    原文参考 纯CSS实现垂直居中的几种方法 html 当元素为 block时 position position +...

网友评论

      本文标题:使Html元素水平垂直居中的几种方法

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