实现水平居中的几种方法

最新推荐文章于 2023-02-24 15:48:46 发布
最新推荐文章于 2023-02-24 15:48:46 发布
阅读量1.6k 收藏 2
点赞数 2
分类专栏： css

一、对于行内元素
text-align:center;
二、对于确定宽度的块级元素：
（1）margin和width实现水平居中
常用(前提：已设置width值)：margin-left:auto; margin-right:auto;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #out {
            background-color: #1d943b;
            width: 200px;
        }

        #in {
            width: 50px;
            text-align: center;
            background-color: #00a0e9;
            margin-left: auto;
            margin-right: auto;
        }

    </style>
</head>
<body>
<div id="out">
    <div id="in">in</div>
</div>

</body>
</html>

在这里插入图片描述
（2）绝对定位和margin-left: -(宽度值/2)实现水平居中
固定宽度块级元素水平居中，通过使用绝对定位，以及设置元素margin-left为其宽度的一半

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
      

        #in {
            width:200px;
            text-align: center;
            background-color: #00a0e9;
           position: absolute;
           left: 50%;
            margin-left: -100px;// 该元素宽度的一半，即100px
        }

    </style>
</head>
<body>

    <div id="in">in</div>


</body>
</html>

在这里插入图片描述
（3）position:absolute + （left=0+top=0+right=0+bottom=0） + margin:auto

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #out {
            background-color: #1d943b;
            width: 200px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }



    </style>
</head>
<body>
<div id="out">
</div>

</body>
</html>

在这里插入图片描述
三、对于未知宽度的块级元素：
（1）table标签配合margin左右auto实现水平居中

使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto
在这里插入图片描述
css代码：

 #out {
            background-color: #1d943b;
            display: table;
           margin-left: auto;
            margin-right: auto;
        }

（2）inline-block实现水平居中方法
父元素进行设置子元素居中
display：inline-block;（或display:inline）和text-align:center;实现水平居中
存在问题：需额外处理inline-block的浏览器兼容性（解决inline-block元素的空白间距）
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #out {
            background-color: #1d943b;
            display: inline-block;
            text-align: center;
            width: 100%;
        }
        #in {

            background-color: #00a2d4;
            display: inline;
        }


    </style>
</head>
<body>
<div id="out">
    <div id="in">123</div>
</div>

</body>
</html>

（3）绝对定位实现水平居中
绝对定位+transform，translateX可以移动本省元素的50%

css代码：

 #out {
            background-color: #1d943b;
            position: absolute;
            left: 50%;
            transform: translateX(-50%); /* 移动元素本身50% */
        }

（4）相对定位实现水平居中

用float或者display把父元素变成行内块状元素，
.contentParent{

display: inline-block; /* 把父元素转化为行内块状元素 */

/*float: left; 把父元素转化为行内块状元素 */

position: relative;

left: 50%;

}

/目标元素/

.content{

position: relative;

}
（5）CSS3的flex实现水平居中方法，法一
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #out {
            background-color: #1d943b;
            display: flex;
            flex-direction: column;

        }

        #in {
            background-color: #00a2d4;
            text-align: center;
            align-content: center;
        }


    </style>
</head>
<body>
<div id="out">
    <div id="in">
        123
    </div>
</div>

</body>
</html>

（6）CSS3的flex实现水平居中方法，法二
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #out {
            background-color: #1d943b;
            display: flex;

        }

        #in {
            background-color: #00a2d4;
            margin: auto;
            text-align: center;
        }


    </style>
</head>
<body>
<div id="out">
    <div id="in">
        123
    </div>
</div>

</body>
</html>

（7）CSS3的fit-content配合左右margin为auto实现水平居中方法
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #out {
            background-color: #1d943b;
         width: fit-content;
            margin-right: auto;
            margin-left: auto;

        }



    </style>
</head>
<body>
<div id="out">
    123
</div>

</body>
</html>

原文：https://blog.csdn.net/dengdongxia/article/details/80297116

耳翼
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
元素水平垂直居中的几种方法
01-20
多的不说，咋们直接进入正题 纯用margin是做不到的 在这里插入代码片 ...我们可以用如下的方法实现： ** 1可以做到，但是box2需要固定大小 Document #box1{ width:300px; height: 300px; border:1
css实现水平居中
BigDaddy233333的博客
11-11 527
一、对于行内元素： text-align:center; 二、对于确定宽度的块级元素： （1）margin和width实现水平居中 常用(前提：已设置width值)：margin-left:auto; margin-right:auto; （2）绝对定位和margin-left: -(宽度值/2)实现水平居中 固定宽度块级元素水平居中，通过使用绝对定位，以及设置元素margin-lef...
水平居中的7个方法
weixin_43989188的博客
01-29 2913
若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 若是块级元素, 该元素设置 margin:0 auto即可.但是该元素一定要有宽度！ 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置: fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器. 4) 使用.
实现水平居中的几种方式
weixin_43611411的博客
02-24 407
元素水平居中的几种方式——学习笔记
关于定位的水平居中
syl2850246的博客
08-25 1312
使得盒子水平居中的CSS: div { width: 100px; height: 100px; background-color: green; position: absolute; top: 50%; margin-top: -50px; /* 盒子高度的一半 */ left: 50%; margin-left: -50px;/* 盒子宽度的一半 */ } ...
relative、absolute定位居中以及小总结
qq_43623306的博客
05-27 1555
relative、absolute 定位小总结: 一、relative 定位总结: 特点: 1.除了位置被left等四个属性影响,对元素没有任何影响(大小) 2.只设置position属性,元素没有任何变化 3.元素的参照位置是自身的初始位置 4.定位偏移后,元素的位置会被保留 5.定位元素会被提升层级,会遮挡没有定位的元素;如果都有定位,下面的元素层级会大于上面的元素 ...
CSS水平垂直居中的几种方法总结
09-24
主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。
CSS 实现垂直居中的几种方法(必看)
12-13
说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式...
CSS实现水平居中的4种思路简要概述
09-24
水平居中是经常遇到的问题。看似方法较多，条条大路通罗马。但系统梳理下，其实都围绕着几个思路展开。本文将介绍关于水平居中的4种思路，感兴趣的朋友参考下吧
css3 flex实现div内容水平垂直居中的几种方法
11-21
一、flex-direction: （元素排列方向） ※ flex-direction:row （横向从左到右排列==左对齐） ※ flex-direction:row-reverse （与row 相反）  ※ flex-direction:column （从上往下排列==顶对齐） ...
定位、元素垂直水平居中的方法
hello world
05-07 1020
static：默认值，无特殊定位1.相对定位 position:relative;参考点:原来的位置;原来的位置仍然占位,不脱流;2.绝对定位 position:absolute;参考点:带有定位的最近一级的父元素,都没有定位,以html为参考点;原来的位置不占位,脱流;3.固定定位 position:fixed;参考点:浏览器的可视窗口(浏览器的四条边);原来的位置不占位,脱流;4.粘性定位 position:sticky;(兼容性差)
[ CSS ] 使用定位实现元素垂直、水平居中
记录开发日常
10-28 1036
用定位实现元素垂直、水平居中实现方法 效果图 如果想要实现这种效果，使元素在浏览器水平、垂直居中，需要给定位top跟left值分别设置为50% <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
css样式设置小技巧
sang_12345的博客
08-01 475
1.水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。 这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？ 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(...
定位和两种居中技巧（前端必备）
weixin_43213962的博客
04-26 1254
定位 在页面布局流中的层布局（定位） 定位主要有四种： 1，静态定位（static） 2，相对定位（relative） 3，绝对定位（absolute） 4，固定定位（fixed） 我们依次来介绍： 1，静态定位（static）： 语法：position:static; 特点：默认，占位，没有参数。几乎用不上（如果有用话，就跟z-index搭配有点用） 2，相对定位（relative）...
实现垂直/水平居中 （4种）
不想写博客
09-08 388
实现垂直/水平居中 （4种）
CSS实现水平居中与垂直居中
qq_44706779的博客
12-28 1584
属性指定元素文本的水平对齐方式（作用于子元素和文本）。其常用的值一般有三种： 属性规定元素应该生成的框的类型（作用与元素自身）。其常用的值一般有四种： (外边距)属性定义元素周围的空间（作用于元素自身）。它一共有四个属性值，可以简写。 属性指定一个元素的定位方法的类型（作用于元素自身）。其常用的值一般有四种： 属性应用于元素的2D或3D转换（作用于元素自身）。这个属性允许你将元素旋转，缩放，移动，倾斜等。这个属性比较复杂，在这里我们用到的主要是移动。 既然是要实现水平居中，那么父元素必然是一个块
freemarker/ftl模板-样式种类
FengZ1的博客
06-03 4355
<w:pPr> 段落样式------------------------------------------------ <w:jc w:val='center'/> 对齐方式 left,right center <w:tc>单元格样式----------------------------------------------- <w:gridSpan w:val="2"/> 左右合并2个单元格 <w:vmerge w:val="restart.
div中的内容水平垂直居中
m0_50179075的博客
10-14 450
一、flex布局 在父div添加CSS样式如下： .flex{ display: flex; // 垂直居中 align-items:center; // 水平居中 justify-content: center; text-align: justify; width: 10px; height: 10px; margin: 0 auto; } 子div的css样式如下： h3 { font-size: 0.6rem; text-align: cen
Css实现水平居中几种方法
最新发布
05-27
有以下几种方法可以使用CSS实现水平居中： 1. 使用text-align属性将文本居中。这适用于内联元素和文本块元素。 ```css .parent { text-align: center; } ``` 2. 使用margin属性将元素居中。这适用于块级元素。 ``...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值