css的3中水平居中方式和4中水平垂直居中方式及应用情形速记

最新推荐文章于 2021-07-11 18:33:31 发布

_阿锋丶

最新推荐文章于 2021-07-11 18:33:31 发布

阅读量273

点赞数

分类专栏：前端天天面试题积累 html css

本文链接：https://blog.csdn.net/weixin_43342105/article/details/107236347

版权

html css 同时被 2 个专栏收录

29 篇文章 17 订阅

订阅专栏

前端天天面试题积累

25 篇文章 4 订阅

订阅专栏

文章目录

三种水平居中方式及其应用情形
四种垂直居中方式和应用场景

三种水平居中方式及其应用情形

inline元素：text-align

主要设置在行内元素父元素中

 #box1 {
        /* 水平居中 */
        text-align: center;
    }

block元素：margin：0 auto

  #box2 #radiu{
        height: 100px;
        width: 100px;
        border: 1px solid black;
        border-radius: 50%;
        background-color: yellow;

        /* 水平居中 */
        margin: auto;
    }

absolute定位过的元素：left：50%；margin-left：负值（元素宽度的一半）

注意：使用这种定位必须要知道他的高度，并且别忘记父元素设置positive：reletive

  #box3 #diamond{
        height: 200px;
        width: 200px;
        border: 1px solid black;
        background-color: yellowgreen;

        /* 水平居中 */

        position: absolute;
        left: 50%;
        margin-left: -100px;

        /* transform: translate(-100px); */
        
    }

综合三种情况的代码和效果如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
    }

    #box1{
        height: 50px;
        border: 1px solid black;
    }

    #box2{
        height: 200px;
        border: 1px solid black;
    }

    #box3{
        height: 300px;
        border: 1px solid black;
        position: relative;
    }
    #box1 {
        /* 水平居中 */
        text-align: center;
        /* height: 50px;
        line-height:50px ; */
    }
    #box2 #radiu{
        height: 100px;
        width: 100px;
        border: 1px solid black;
        border-radius: 50%;
        background-color: yellow;

        /* 水平居中 */
        margin: auto;
    }
 
    #box3 #diamond{
        height: 200px;
        width: 200px;
        border: 1px solid black;
        background-color: yellowgreen;

        /* 水平居中 */

        position: absolute;
        left: 50%;
        margin-left: -100px;

        /* transform: translate(-100px); */
        

    }


</style>
<body>
    <div class="box" id="box1">
        <span>提目</span>
    </div>
    <div class="box" id="box2">
        <div id="radiu"></div>
    </div>
    <div class="box" id="box3">
        <div id="diamond"></div>
    </div>
</body>
</html>

在这里插入图片描述

四种垂直居中方式和应用场景

inline元素：设置line-height等于height的值

这种就是必须要知道元素的height值，主要设置在行内元素父元素中

  #box1{
        /* 水平居中 */
        text-align: center;
        height: 50px;
        line-height:50px ;
    }

absolute定位过的元素：top：50%；margin-top：负值（元素宽度的一半）

注意：使用这种定位必须要知道他的高度，并且别忘记父元素设置positive：reletive

  #box3 #diamond{
        height: 200px;
        width: 200px;
        border: 1px solid black;
        background-color: yellowgreen;

    	/* 水平垂直居中 */
        position: absolute;
        left：50%;
        margin-left:-100px
        top: 50%;
        margin-top: -100px;
       
        

    }

absolute定位过的元素：设置transform：translate（-50%，-50%）

这里只用考虑到transform的兼容性问题

    #box3 #diamond{
        height: 200px;
        width: 200px;
        border: 1px solid black;
        background-color: yellowgreen;

        /* 水平居中 */
        /* 垂直居中 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

absolute定位过的元素：top,left,bottom,right =0,margin:auto

这个是最优的既能保持兼容性又不用考虑他的高度宽度值

    #box3 #diamond{
        height: 200px;
        width: 200px;
        border: 1px solid black;
        background-color: yellowgreen;

        /* 水平居中 */

        /* 垂直居中 */
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: ;
    }

_阿锋丶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css的3中水平居中方式和4中水平垂直居中方式及应用情形速记

文章目录三种水平居中方式及其应用情形inline元素：text-alignblock元素：margin：0 autoabsolute定位过的元素：left：50%；margin-left：负值（元素宽度的一半）四种水平垂直居中方式和应用场景inline元素：设置line-height等于height的值absolute定位过的元素：top：50%；margin-top：负值（元素宽度的一半）absolute定位过的元素：设置transform：translate（-50%，-50%）absolute定位过的
复制链接

扫一扫