html中块级元素的水平垂直居中

最新推荐文章于 2024-09-16 09:20:49 发布

王先发

最新推荐文章于 2024-09-16 09:20:49 发布

阅读量8.2k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_38453189/article/details/71169909

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、如果父级元素的宽高和子级元素的宽高都固定，可以直接用元素定位（relative、absolute）的方法让子级元素处于父级元素中央。

二、如果父级元素的宽高不定，而子级元素的宽高固定，则可以采用css3的新增属性calc来使子级元素水平、垂直方向处于父级中央。calc可以给元素的width、height、margin等设置动态值。

clac语法：calc() = calc(四则运算)

说明：
用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-“, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>clac</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #div{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            left: -webkit-calc(50% - 100px);
            top: -webkit-calc(50% - 100px);
        }
    </style>
</head>
<body>
    <div id="div"></div>
</body>
</html>

效果：

这里写图片描述

三、如果父级元素和子级元素的宽高都不定，则可以采用flex布局来使子级元素在父级元素中水平垂直居中显示。

flex布局详细讲解转到此处

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #div{
            background: red;
        }
    </style>
</head>
<body>
    <div id="div">
        <h1>
            flex布局
        </h1>
    </div>
</body>
</html>