实现水平居中、垂直居中的方法

最新推荐文章于 2023-09-30 13:11:25 发布
最新推荐文章于 2023-09-30 13:11:25 发布
阅读量242 收藏
点赞数
分类专栏： css 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38396070/article/details/104983273
版权

水平居中：

  • inline 元素：text-align:center
  • block元素：margin:auto
  • absolute元素：left:50% + margin-left 负值

垂直居中:

  • inline元素：line-height的值等于height值
  • absolute 元素：top：50% + margin-top负值
  • absolute元素：transform(-50%,-50%)
  • absolute元素：top,right,bottom,left = 0 + margin:auto
HonGL54
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
元素水平垂直居中的几种方法
01-20
首先，我们来看第一种方法，通过`margin: auto`实现水平居中，但这种方法无法实现垂直居中。示例代码如下： ```css #box1 { width: 300px; height: 300px; border: 1px black solid; } #box2 { width: 100px; ...
DIV水平垂直居中css实现代码
09-25
总的来说，CSS提供了多种方法来实现`DIV`的水平垂直居中，包括绝对定位、Flexbox和CSS Grid。选择哪种方法取决于具体的需求和浏览器支持情况。对于现代项目，推荐使用Flexbox或CSS Grid，它们提供了更强大、更灵活的...
水平居中实现
ambkn80466的专栏
11-15 101
水平居中 1行内元素-对父元素设置属性：text-align：center 例： <div class=”image”><img src=”....”/></div> .image{ text-align:center; } 效果-父元素内容居中显示 　　　　 2块级元素 （1）定宽块级元素-通过设置左右margin值为au...
实现水平居中的方法
weixin_47224517的博客
06-18 217
实现水平居中的方法 第一种： 第二种： 第三种： 第四种：css3的flex实现 能让我们的布局变得更加灵活与方便，唯一的就是目前浏览器的兼容性较差。那么第五种方法，我们就使用flex来实现。 body{ background: #000; margin-top: 50px; } .pagination{ display: flex; justify-content: center; } .pagination li{ line-height: 25px;
实现水平居中的几种方法
05-16 108
摘自：https://blog.csdn.net/baidu_24024601/article/details/51131368 1.用inline-block和vertical-align来实现居中：这种方法适合于未知宽度高度的情况下。 <!DOCTYPE html> <html lang="en"> <head> <me...
CSS实现水平居中和垂直居中
Qimingweikun的博客
11-03 2422
水平居中 行内元素 为父元素设置中’text-align:center’样式<div style="text-align: center"> <span>行内元素水平居中</span> </div> 定宽块级元素 定义元素左右margin为auto<div> <div style="width: 100px;height: 100px;background-color: gree
水平居中有哪些实现方式
初漾的博客
06-18 597
(不推荐使用) center center margin style='width: 3em; margin: 0 auto;'>margin margin text-align style='text-align: center'>text-align text-align table + margin display:
Android应用借助LinearLayout实现垂直水平居中布局
09-02
本篇文章将详细讲解如何利用LinearLayout实现垂直水平居中的布局效果。 首先，要理解LinearLayout的基本属性。`android:orientation`用于定义子视图的排列方向，可设置为`vertical`（垂直）或`horizontal`（水平）...
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： center.html： <!DOCTYPE html> <html lang=Zh> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0>...
实现水平垂直居中总结.html
06-28
关于元素的水平/垂直居中的方案有很多，包括知道元素宽/高和不知道元素宽/高的情况。该html文档总结了几个我知道的较为常用的实现方法。
jQuery实现水平和垂直居中
front_end_fan
08-21 5613
实现div的实现水平和垂直居中，使用css有好多方法，这里不赘述。但是有些属性像是margin-left:-50%;这样的属性在华为手机的低版本上无法识别。 解决办法：jQuery实现水平和垂直居中 $(".mydiv").css({ position: "absolute", left: ($(window).width() - $(".mydiv"
实现水平居中的几个方法
ljyahaha的博客
02-22 370
块级元素实现水平居中利用margin:0 auto来实现，通常该块级元素要指定宽度； 行内元素实现的方式是text-align:center； 经常用到的一个方法之一：利用绝对定位使元素top:50%; left:50%，这是以左上角为原点定位，所以实现的是左上角为原点居中，因为元素自身有一定的高度和宽度，所以元素本身并不居中。 transform：translate(-50%，-50%):向上（X轴）向左（Y轴）移动自身长宽的50%，使元素位于中心。 注意：需要居中的元素应为绝对定位（position.
各种水平居中方法
weixin_34054866的博客
09-22 55
1、text-algin:center 　　可以使行内元素居中、也可以使块级元素中的文本居中，但不可以使块级元素本身居中 2、margin:0 auto 　　仅可以使块级元素居中，inline和inline-block都不可以。 3、绝对定位的居中：left:100px; right:100px; 　　左右同时设置相同值，元素（行内和块级都适用）不设置宽度，元素的宽度==容器宽度减去左右...
实现水平居中的几种方式
weixin_43611411的博客
02-24 438
元素水平居中的几种方式——学习笔记
CSS中实现元素水平居中、垂直居中的6个方法（详解）
最新发布
xtcbql的博客
09-30 2万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
css实现水平居中的几种方式
weixin_42619706的博客
07-25 337
一、对于行内元素： text-align:center; 二、对于确定宽度的块级元素： （1）margin和width实现水平居中 常用(前提：已设置width值)：margin-left:auto; margin-right:auto; （2）绝对定位和margin-left: -(宽度值/2)实现水平居中 固定宽度块级元素水平居中，通过使用绝对定位，以及设置元素margi...
水平和垂直方向都居中
dnu88441的博客
06-01 494
水平和垂直方向都居中：我们可以在水平上用text-align:center;竖直方向上是vertical-align:middle;但是这个只能用在特定的元素上： 父元素：display:table;子元素：display:table-cell; 例子：父元素： display:table; width:100%; margin-bottom:13px; ...
水平居中的7个方法
weixin_43989188的博客
01-29 2950
若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 若是块级元素, 该元素设置 margin:0 auto即可.但是该元素一定要有宽度！ 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置: fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器. 4) 使用.
水平居中的方法
LuckXinXin的博客
05-21 97
元素为行内元素，设置父元素text-align:center 如果元素宽度固定，可以设置左右margin为auto; 如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto; 使用flex-box布局，指定justify-content属性为center display设置为tabel-ceil ...
实现元素水平垂直居中的方法
05-11
实现元素水平垂直居中的方法有多种，下面列举几种比较常用的方法： 1. 使用flex布局 使用flex布局可以很方便地实现元素的水平垂直居中。具体实现方法如下： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2. 使用绝对定位 使用绝对定位可以将元素相对于父元素进行定位，从而实现水平垂直居中。具体实现方法如下： ```css .container { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 3. 使用表格布局 使用表格布局可以将元素放置在表格单元格中，并通过设置单元格的垂直和水平对齐方式来实现元素的水平垂直居中。具体实现方法如下： ```css .container { display: table; width: 100%; height: 100%; } .box { display: table-cell; text-align: center; /* 水平居中 */ vertical-align: middle; /* 垂直居中 */ } ``` 4. 使用transform属性 使用transform属性的translate函数可以将元素相对于自身进行定位，从而实现水平垂直居中。具体实现方法如下： ```css .container { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 以上是一些比较常用的方法，还有其他一些方法可以实现元素的水平垂直居中，可以根据具体情况进行选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值