css - 水平居中

最新推荐文章于 2022-09-26 12:26:03 发布
最新推荐文章于 2022-09-26 12:26:03 发布
阅读量221 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_31057219/article/details/79280299
版权

参考：

CSS常见布局及解决方案
把简单做好也不简单-css水平垂直居中

文字水平居中

对于单行文字来说，直接使用text-align: center即可。
多行文字可以看作一个块级元素参考margin法和定位法。

1、margin法：子节点：margin + 定宽

<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .parent {
            background-color: #0eabdf;
            width: 300px;
            height: 300px;
        }

        .child {
            background-color: #fe6464;

            width: 100px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
<div class="parent">
    <div class="child">child</div>
</div>
</body>
</html>

需要满足三个条件:
1.元素定宽
2.元素为块级元素或行内元素设置display:block
3.元素的margin-left和margin-right都必须设置为auto
三个条件缺一不可。

效果图：

这里写图片描述

2、子节点：table + margin

<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .parent {
            background-color: #0eabdf;
            width: 300px;
            height: 300px;
        }

        .child {
            background-color: #fe6464;

            display: table;
            margin: 0 auto;
        }
    </style>
</head>

<body>
<div class="parent">
    <div class="child">child</div>
</div>
</body>
</html>

display: table 在表现上类似 block 元素，但是宽度为内容宽。

无需设置父元素样式 （支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为 table

优点:只需要对自身进行设置
不足:IE6,7需要调整结构

效果图：

这里写图片描述

3、子节点：inline-block + 父节点：text-align

<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .parent {
            background-color: #0eabdf;
            width: 300px;
            height: 300px;

            text-align: center;
        }

        .child {
            background-color: #fe6464;

            display: inline-block;
        }
    </style>
</head>

<body>
<div class="parent">
    <div class="child">child</div>
</div>
</body>
</html>

兼容性佳（甚至可以兼容 IE 6 和 IE 7）
优点：兼容性好； 不足：需要同时设置子元素和父元素

效果图：

这里写图片描述

4、定位法：父节点：relative + 子节点：absolute + margin-left

<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .parent {
            background-color: #0eabdf;
            width: 300px;
            height: 300px;

            position: relative;
        }

        .child {
            background-color: #fe6464;

            position: absolute;
            left: 50%;
            width: 100px;
            margin-left: -50px;
        }
    </style>
</head>

<body>
<div class="parent">
    <div class="child">child</div>
</div>
</body>
</html>

1.元素定宽
2.元素绝对定位，并设置left:50%
3.元素负左边距margin-left为宽度的一半

子节点宽度需要固定
相比于使用transform ，有兼容性更好

效果图：

这里写图片描述

5. 定位法：父节点：relative + 子节点：absolute + transform

<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .parent {
            background-color: #0eabdf;
            width: 300px;
            height: 300px;

            position: relative;
        }

        .child {
            background-color: #fe6464;

            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>

<body>
<div class="parent">
    <div class="child">child</div>
</div>
</body>
</html>

绝对定位脱离文档流，不会对后续元素的布局造成影响。
transform 为 CSS3 属性，有兼容性问题
不足：兼容性差,IE9及以上可用

子节点：不设置width具体值

    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);

效果图：

这里写图片描述

6. 父节点：flex + justify-content 

<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .parent {
            background-color: #0eabdf;
            width: 300px;
            height: 300px;

            display: flex;
            justify-content: center;
        }

        .child {
            background-color: #fe6464;
        }
    </style>
</head>

<body>
<div class="parent">
    <div class="child">child</div>
</div>
</body>
</html>

只需设置父节点属性，无需设置子元素
flex有兼容性问题,缺点：兼容性差，如果进行大面积的布局可能会影响效率.

效果图：

这里写图片描述

Mars-xq
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈css处理水平居中的问题
09-24
本文将探讨如何使用CSS处理水平居中问题，这是一项基本但至关重要的技能，尤其对于创建响应式和对齐良好的用户界面至关重要。我们将讨论三种主要方法，分别针对行内元素、定宽块状元素和不定宽块状元素。 1. **行内...
css子元素完美居中的四种方法
yu_uy88的博客
08-22 3351
css子元素完美居中的四种方法 弹性盒子实现居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>盒子完美居中</title> <style
css使子元素在父元素居中的各种方法/ 子元素居中有哪些方案
lzfengquan的博客
07-08 2263
html结构 方法一： display:flex 弹性盒 .parent { width: 500px; height: 500px; background: red; display: flex; align-items: center; justify-content: center; } .child { width: 100px; height: 100px; background: blue; } 方法二：display:table-cel 此方法用的很少，大部分用于整体文本居中 .parent
CSS：父子元素，让子元素居中
weixin_34344403的博客
03-01 1451
2019独角兽企业重金招聘Python工程师标准>>> ...
如何在一个div中使其子div居中
u012088576的博客
03-30 6万+
网上其他地方已讲述过对其的不同实现方式，今天主要做一个详细的汇总，希望对大家有帮助。 ps：我面试的时候就被问到过这个问题，当时都回答错了，蓝瘦。 假设父div的类名为father，子div的类名为son。在html中的形式如下： &lt;div class="father"&gt; &lt;div class="son"&gt; &lt;/div&gt; 接下来用css设置s...
CSS实现子元素垂直居中对齐
KatherineLYP的博客
08-21 7851
子元素垂直居中对齐
CSS常见的让元素水平居中显示的方法
01-19
让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。 用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平...
css布局网页水平居中常用方法
10-30
CSS作为网页样式控制的语言，提供了多种方法来实现页面元素的水平居中。以下我们将深入探讨几种常用的CSS布局网页水平居中的方法。 1. **Text-align 属性** 在IE浏览器中，可以通过设置`body`元素的`text-align`...
关于css水平居中的小小探讨
09-24
【CSS水平居中技术详解】 在网页设计中，CSS（层叠样式表）的水平居中布局是一项基础但至关重要的技能。本文将深入探讨几种常见的CSS水平居中方法，包括行内元素、固定宽度和不定宽度块级元素的居中策略。 首先，...
CSS水平垂直居中解决方案(6种)
09-24
以下将详细介绍六种不同的CSS水平垂直居中解决方案： 1. **绝对定位+margin负值法** 当你知道元素的宽度时，可以使用这种方法。首先，设置父元素为相对定位，然后子元素使用绝对定位，将其left和top属性设置为50%...
css子元素在父元素中居中
weixin_51020122的博客
09-26 1584
1、子元素相对于父元素绝对定位：子元素的top、left设置为50%并且子元素margin-top和margin-left减去各自宽高的一半。5、子元素相对父元素绝对定位，子元素top，left值为50%，transform：translate（-50%，-50%）。4、子元素相对定位，子元素top，left值为50%，transform：translate（-50%，-50%）。2、子元素相对于父元素绝对定位：子元素上下左右全为0，然后设置子元素margin：auto。1、设置子元素和父元素的行高一样。
html中div内容居中的方法
热门推荐
火星男孩的分享空间
03-27 7万+
方法1：table-celldiv中的内容居中：不改变盒子尺寸。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { background-color: red; widt
前端学习 : webstorm ide快速输入html等标签
火星男孩的分享空间
01-25 1万+
参考： 前端学习总结（二十）那些你可能不知道却强大方便的WebStorm快捷键 webstorm批量编辑快捷键【跳转到指定行，批量输入】 Intellij idea 快捷键(1)–生成for循环代码块 WebStorm快捷键收集 html lang="en"> head> meta charset="UTF-8"> title>webstorm快键键title> h
css - display:table-cell的使用
火星男孩的分享空间
02-08 1万+
参考： 布局神器(一)display:table-cell display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。 display: table与标签table的对比 示例： 参考：css文档：display css中display设置为table、table-row、table-cell后的作用及其注意点 &amp;amp;lt;!DOCTYPE htm...
前端学习指南
火星男孩的分享空间
02-08 9850
前端技能： H5 CSS3 JavaScript gulp webpack 等 Node.js安装及环境配置之Windows篇 windows下nodejs环境配置windows下nodejs环境配置 快速理解掌握gulp用法 gulp详细入门教程 一小时包教会 —— webpack 入门指南 入门Webpack，看这篇就够了 SASS中文网 Less.js 中文文档 该使用S...
css盒子模型的padding的误解,利用padding实现居中
火星男孩的分享空间
03-25 2758
一、Android中的图片使用padding摆放：<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_heigh
css与jq中的显示与隐藏
火星男孩的分享空间
04-07 1073
CSS Display(显示) 与 Visibility（可见性） display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。 vi
css - 左定宽+右自适应
火星男孩的分享空间
02-07 948
参考：CSS常见布局及解决方案 左定宽+右自适应 实现方法如下： 1、position + margin： html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> * { padding: 0; margi
css-flex布局
火星男孩的分享空间
02-06 605
参考： Flex 布局教程：语法篇(阮一峰) Flex 布局教程：实例篇(阮一峰) 浅谈display:flex display:flex 布局教程 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end； 交叉轴的开始位置叫做cross start，结束位置
css div水平居中
最新发布
02-01
要实现CSS中div水平居中的效果，可以使用以下几种方法： 1. 使用margin属性： 将div的左右margin设置为auto，可以使其在父容器中水平居中。 ```css .center-div { margin-left: auto; margin-right: auto; } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值