实现元素水平居中

最新推荐文章于 2024-05-13 19:30:00 发布

一颗西柚酱

最新推荐文章于 2024-05-13 19:30:00 发布

阅读量593

点赞数 1

分类专栏：前端基础学习 css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/howbeauty/article/details/126362468

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端基础学习

2 篇文章 0 订阅

订阅专栏

元素水平居中是面试经常会碰到的问题，今天就来总结一下各个方法

行内元素设置居中（inline）

我们先来比较一下 h1、 p 与span 的不同之处

h1和p都是块级元素，独占一行，但是span是行内块元素

下面代码效果

<style>
        h1 {
            text-align: center;

        }

        p {
            text-align: center;
        }

      
    </style>
</head>

<body>
    <h1>我是h1标签</h1>
    <p>我是p标签</p>
    <span>我是span标签</span>


</body>

在这里插入图片描述

为了实现span标签可以水平居中，需要在父级元素添加
text-align: center; 这样就能够实现效果
在这里插入图片描述

以上针对于行块元素比较简单，但是针对块级元素需要使用别的办法

块级元素

//针对普通的块级元素 margin:0 auto;

浮动的元素

由于脱离了文档流 margin:0 auto; 已经已经不生效了

解决办法

  div {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 0 auto;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

在这里插入图片描述

有时候我们又有别的需求，即元素的位置自由设定
这时候我们可以用绝对定位

  span {
            background-color: yellow;
            /* 一下三行使得span标签脱离文档流，可以设置宽度了，如果不设置默认和浏览器同宽
            并且高度浏览器我不想靠左或者靠右 */
            position: absolute;
            width: 100px;
            left: 0;
            right: 0;
            text-align: center;
            /* 可用普通流的方法 */
            /* 1.一定要带上left 和right，不然无效 */
            /* margin: 0 auto; */
            /* 2、 */
            left: 50%;
            transform: translateX(-50%);
        }