css 让元素垂直水平居中的方法

最新推荐文章于 2024-08-08 11:48:45 发布

hadardb

最新推荐文章于 2024-08-08 11:48:45 发布

阅读量100

点赞数

分类专栏： css 文章标签： css 垂直居中水平居中

本文链接：https://blog.csdn.net/qq_40299140/article/details/100662853

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我的常用方式：

<!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>元素水平垂直居中</title>
    <style>
    .line_ele,.line_flex_ele,.div_ele,.div_width_ele,.div_margin_ele{background-color: wheat}
    .line_parent{height: 300px;background-color:blueviolet; text-align: center}  
    .line_flex_parent{display: flex; justify-content:center; align-items:center;height: 300px;background-color:cyan;}
    .line_ele{line-height: 300px}
    .div_parent{height: 300px;background-color:blueviolet; position: relative;}
    .div_width_ele{width: 200px;height: 200px;position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
    .div_margin_ele{position: absolute; left: 0;right: 0;top: 0;bottom: 0; margin: auto;width: 200px;height: 200px;}
    .div_ele{width: 200px;height: 200px;margin: 0 auto}

    </style>
</head>
<body>
    <!-- 行内元素 -->
    <!-- 1. 父元素使用text-align，行内元素使用line-height -->
    <!-- 水平居中：  父元素增加text-align：center  注意父元素必须是块元素 -->
    <!-- 垂直居中：  为元素添加line-height  行高为父元素高度 -->
    <div class="line_parent">
        <span class="line_ele">行内子元素</span>
    </div>
    <!-- 2.使用flex布局  块元素也通用 -->
    <div class="line_flex_parent">
        <span class="line_flex_ele">行内子元素2</span>
    </div>
    <!-- 块元素 -->
    <!-- 1.使用绝对定位  left top 设置为50%   再使用transfrom修正一半的宽高 -->
    <div class="div_parent">
        <div class="div_width_ele">块元素</div>
    </div>
    <!-- 2.使用margin auto 的方式  -->
    <div class="div_parent">
        <div class="div_margin_ele">块元素</div>
    </div>
    <!-- 单一水平居中：  将块元素左右margin设为auto -->
    <div class="div_parent">
            <div class="div_ele">块元素</div>
        </div>
</body>
</html>

hadardb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 让元素垂直水平居中的方法

我的常用方式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
复制链接

扫一扫

专栏目录