css—使脱离文档流的元素水平居中

最新推荐文章于 2022-04-23 15:07:42 发布

颖_恋

最新推荐文章于 2022-04-23 15:07:42 发布

阅读量2k

点赞数

分类专栏：样式设置文章标签： css使脱离文档流的元素水平居中

本文链接：https://blog.csdn.net/line233/article/details/89677775

版权

在静态页面设计中，当需要对绝对定位的元素进行布局时，其父元素通常设置为相对定位，导致容器脱离文档流。如何使这种情况下容器水平居中成为一个挑战。通过移除容器的`flex-direction: row`并添加`justify-content: center`，成功解决了这个问题，实现了理想的水平居中效果。

摘要由CSDN通过智能技术生成

在设计静态页面时，有一部分布局需要使用绝对定位，那么它的父元素就要使用相对定位，这样一来就使承载绝对定位元素的容器脱离了文档流，现在让容器水平居中难倒了我这小菜鸡。它就一直这个样子：

这是源码：

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *,*:before,*:aft

最低0.47元/天解锁文章

颖_恋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css—使脱离文档流的元素水平居中

在设计静态页面时，有一部分布局需要使用绝对定位，那么它的父元素就要使用相对定位，这样一来就使承载绝对定位元素的容器脱离了文档流，现在让容器水平居中难倒了我这小菜鸡。它就一直这个样子：这是源码：<!doctype html><html lang="zh"><head> <meta charset="UTF-8"&...
复制链接

扫一扫