3行Css实现div水平、垂直居中

最新推荐文章于 2024-04-15 15:39:46 发布
最新推荐文章于 2024-04-15 15:39:46 发布
阅读量1k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014695532/article/details/51597719
本文介绍了一种使用Flexbox实现元素在容器内水平和垂直居中的简单方法，并提供了兼容性的说明及具体实例。

这里写图片描述

HTML部分：

<div class="container">
    <!-- This is your content ... -->
</div>

Css部分：

就像下面，只需要给.container三行css规则就可以使它在水平方向和垂直方向均处于居中。

.container {
      display: flex;
      justify-content: center;
      align-items: center;
}

兼容性

这个方法适用于所有现代浏览器- IE10 +，Chrome浏览器，Firefox和Safari（与-webkit- 前缀）。完整的兼容性列表如下：
这里写图片描述

这里写图片描述

一个具体实例

height="450" width="600px" scrolling="no" src="//codepen.io/G-Dragon/embed/yJYLLz/?height=450&theme-id=0&default-tab=html,result&embed-version=2" allowfullscreen="true">See the Pen <a href="http://codepen.io/G-Dragon/pen/yJYLLz/">3&#34892;Css&#23454;&#29616;&#23481;&#22120;&#27700;&#24179;&#12289;&#22402;&#30452;&#23621;&#20013;</a> by G.Dragon (<a href="http://codepen.io/G-Dragon">@G-Dragon</a>) on <a href="http://codepen.io">CodePen</a>.&#10;
CSS+DIV布局(满屏自适应三行布局,兼容FF,div垂直居中)
07-13
带DOCTYPE的写法。。 ------------------ CSS+DIV写的，上下固定高度，中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
css实现div水平、垂直居中兼容chrome、ie8
09-25
要实现一个DIV元素在网页中水平和垂直居中，可以使用不同的CSS方法。这些方法的兼容性决定了它们能够适用于哪些浏览器版本。在上述文件中，给出了几种不同的实现方式，其中一些兼容现代浏览器如Chrome，同时也兼容较...
三行代码CSS竖向居中
weixin_30682415的博客
04-20 118
1 .element{ 2 position:relative; 3 top:50%; 4 transform:translateY(-50%); 5 } 这里无需设置高度或者父元素的position属性。（IE9可用） 如果想兼容老浏览器。 .parent-element{ -webkit-transform-style:preserve-3d;}...
实现div水平垂直居中的几种方式
scry丶坏坏的博客
09-09 904
使div水平垂直居中的几种方式： 1、第一种 父div高度宽度固定，相对定位；子div高度宽度固定，绝对定位。使用top:50%;left:50%;margin-left:-200px;margin-top:-150px;实现水平垂直居中。 缺点就是子div脱离文档流 .my-div{ border:1px solid red; width:400px; height:3...
如何使用flex布局，实现三个div垂直居中布局
zwf193071的专栏
05-07 1760
前言 有个布局需求：父级容器， class为szb-left-menu，里面有三个div，希望能实现下图的排列效果： 如何用flex实现类似的效果呢？ 代码 话不多说，父级容器的样式代码如下所示： .szb-left-menu { position: absolute; z-index: 9999; top: 100px; left: 28px; height: calc(100% - 150px); display: flex; flex-flow
【CSS】实现div块上下左右居中对齐的5种方式
热门推荐
weixin_45620943的博客
10-30 1万+
以上2,4,5方式，注意浏览器版本，较老版本浏览器可能不兼容。
使用css实现div垂直居中的示例
09-25
此外，为了使`#content`中的文本“Sun”垂直居中，我们利用了`text-align: center`来实现水平居中，`line-height`属性则用来设置行高。当`line-height`的值等于元素的高度时（这里是`100px`），文本将会垂直居中于`...
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： ... <!...<... <...meta name=viewport content=width=device-width, initial-scale=1.0&gt...link rel=stylesheet href=center.css> </head> <body> <div class=father> <div class=son><
css3 flex实现div内容水平垂直居中的几种方法
11-21
在本文中，我们将深入探讨如何利用Flexbox实现div内容的水平垂直居中。 首先，我们要了解Flexbox的主要属性： 1. `flex-direction`：这个属性定义了flex容器中flex项（子元素）的排列方向。有四个可能的值： - `...
div框水平垂直居中跟内容垂直居中.html
03-31
div框水平垂直居中跟内容垂直居中
CSS实现三栏布局和垂直居中
liuzijiang1123的专栏
06-01 2042
网上找的方法，自己整理一下~（这些面试也会考） #三栏 绝对布局 我是左边 我是右边 我是中间 html,body{ margin: 0px; width: 100%; } #left,#right{ width: 200px; height: 200px; background-color: #ffe6b8; position: absolu
CSS 实现DIV水平垂直居中(二)
qq_42758330的博客
02-22 798
上期介绍了CSS实现div水平居中的五种方法，下面介绍CSS实现div垂直居中的几种方法。弹性布局实现div垂直居中的思路是一样的,当我们没有对主轴进行设置时，使用。标签，设置高度100%，再将d2和这个空的span设置为。上下留白实现视觉效果上的垂直居中。,思路和水平居中是一样的，详解可以看上一篇。5.通过定位实现div垂直居中。弹性布局实现div垂直居中。定位实现div垂直居中。标签实现div居中对齐。这里呢我们首先在d1中添加一个空的。对垂直方向进行设置。
CSS垂直三列居中，中间自适应
xiaozhen0610的博客
08-08 291
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 让页面的高100%，如果不设置html，body 高100%的话，我们后面设置div高100%就没有效果了 */ html,body{ width:1.
部分css实现垂直居中和靠右的方法
yytoo2的博客
06-28 9652
一、垂直居中方法： 1）使用padding使多个文本或input在div中居中显示（对div和文本高度有要求）：    将div的高度设为各子元素中高度最高的一个h1，加入我们需要的div高度为h2，那么我们就需要填充padding-top和padding-bottom均为（h2-h1)/2，若选取的h1不是最高的元素高度则可能出现部分模块显示偏下   （若文字高度未
css div水平垂直居中解决方案
Gewenjuan_0309的博客
04-15 397
一、方案1：绝对定位+top+left+(margin-left)+(margin-top)二、方案2：绝对定位+left+right+top+bottom+margin。五、方案5：绝对定位+left+top+transform。三：方案3：Flex布局。四、方案4：grid布局。
CSS设置div上下居中
加油吧，少年！
07-20 4173
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 二、模拟表格法 将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。 html结构如下： <div i
div垂直居中靠右
成长中de大神
09-03 5501
div垂直居中靠右 //父元素加以下属性 flex: 1;display: flex; text-align: right; align-items: center; justify-content: center;
css设置div水平居中方法
恒二哥的博客
11-02 4242
2、在父级div元素里设置“text-align: center”样式，在子一级div元素里设置“display: inline-block”样式。子一级元素设置属性：display: inline-block;方式：父级元素设置属性：text-align: center;1、给div元素设置“margin: 0 auto”样式；方式：元素绑定属性：margin: 0 auto;注意：方法1：常用，适用于已知父级元素宽度的情况。
html+css 将<div>水平居中与垂直居中的几种办法
Skander820的博客
05-05 771
示例代码： &lt;style&gt; .box { width: 200px; height: 200px; background-color: red; } .inner { width: 100px; height: 100px; background-color:...
css实现div水平垂直居中
最新发布
01-19
为了使子元素 `.child` 在其父容器 `.parent` 中实现水平和垂直居中，可以通过设置 Flexbox 的属性来完成。 ```css .parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /*...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值