div中的div如何居中

STPace 2020-02-17 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son">son</div>
        </div>
    </body>
</html>

方法一（使用绝对布局）： 这种方式的弊端是：必须要知道这个容器的长宽，因为在子元素中的    margin-top:-100px;    margin-left:-100px; 这两个样式分别是子元素长、宽的一半。

.father {
　　width: 500px;
　　height: 500px;
　　position: relative;
　　background-color: red;
}
 
.son {
　　width: 200px;
　　height: 200px;
　　position: absolute;
　　top: 50%;
　　left: 50%;
　　margin-top: -100px;
　　margin-left: -100px;
　　background-color: black;
}

方法二：仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。//这种方式很好的避免了方式一的弊端，不需要知道自己的长宽，一样可以定位到中间。

.father{
　　width: 1000px;
　　height: 600px;
　　position: relative;
　　background-color: red;
}
.son {
　　background-color: #fff;
　　width: 300px;
　　height: 300px;
　　position: absolute;
　　left: 50%;
　　top: 50%;
　　transform: translate(-50%, -50%);
}

方法三（使用弹性布局flex）：//这种方式比较通用：这样给父元素设置了三个样式display:flex;(弹性布局)    justify-content:center;(内容水平居中)   align-items:center; (内容垂直居中) 就可以达到水平、垂直居中的效果。

.father {
　　width: 500px;
　　height: 500px;
　　display: flex;
　　justify-content: center;
　　align-items: center;
　　background-color: red;
}
.son {
　　width: 200px;
　　height: 200px;
　　background-color: black;
}　

方法四（使用绝对布局）：//使用这种方式的要领是：子绝父相，且子元素要设置以下的样式position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; 就可以达到居中效果。

.father {
　　width: 500px;
　　height: 500px;
　　position: relative;
　　background-color: red;
}
 
.son {
　　width: 200px;
　　height: 200px;
　　position: absolute;
　　top: 0;
　　right: 0;
　　bottom: 0;
　　left: 0;
　　margin: auto;
　　background-color: black;
}
STPace

STPace

相关推荐

多个你不知道的 CSS 居中方案！

要使内联元素居中，使用 text-align: center 足够了。对于多个内联的项目，也可以正常工作。使用网格容器时，图中的盘子将根据其网格区域居中。请注意，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。宽度和高度已知的块元素可以通过设置mar

hellowzm / 0评论 2020-10-12

CSS代码片段

2.将父元素文本流水平居中,配合子元素变成行内快

e度空间 / 0评论 2020-06-13

HTML中怎么使文字各种居中对齐？（代码示例）

本篇文章主要介绍了如何去写关于html文字居中代码。希望对有需要的朋友有所帮助。前端10K面试准备，最完整面试真题分享（含答案）！text-align 属性规定元素中的文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 just

gufudhn / 0评论 2020-06-12

css实现垂直水平居中

<!DOCTYPE html>. margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;width: 300px

沈宫新 / 0评论 2020-05-04

bootstrap div垂直居中+水平居中保持响应式

/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->

Phoebe的学习天地 / 0评论 2020-04-14

CSS垂直居中

.eleTag{/*设置元素绝对定位*/position:absolute;top 50%;left: 50%;/*css3 transform 实现*/transform: translate;

xiaohuli / 0评论 2020-02-12

完美实现CSS垂直居中的11种方法

本人前端小白，正在做一个小程序开发的项目，css样式调整搞的头都大了。关于垂直居中，已尝试了文中的几个垂直居中css样式设置，已成功解决我的问题，故转载来备份下。这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居

liusure0 / 0评论 2020-01-11

flex 常见属相 及 实现垂直水平居中

flex-flow: // 复合属性，相当于同时设置了flex-direction和flex-wrap. align-self: // 控制子项自己在侧轴的排列方式。auto -- 默认值为auto，表示继承父元素的align-items属性，如果没有父元

wangjie / 0评论 2020-01-12

Web前端：CSS 轻松搞定标签(元素)居中问题

在CSS里，标签位置居中一直是困扰Web前端的难题。在本文中，我对这类问题进行了探究和给出了几点建议，供读者参考。1 行内标签1.1 水平居中在父级标签中使用 text-align: center。如果是多行，稍微有点麻烦，需要在该标签设置 display

zuncle / 0评论 2019-12-30

css不同情况下的各种居中方法

margin: 0 auto ;display: flex;position: absolute;position : absolute;left : 50%;position: absolute;width : 宽度；margin: 0 auto;dis

jiedinghui / 0评论 2019-12-23

css的居中

<!DOCTYPE html>. width: 400px;height: 400px;background-color: red;text-align: center;width: 200px;height: 200px;background

libowen0 / 0评论 2014-05-30

Css居中div，Css居中img，Css居中文本，Css垂直居中div

width: 100px;margin: 0 auto;display: block;margin-left: auto;margin-right: auto;min-height: 12em;display: table-cell;vertical-al

Simagle / 0评论 2015-05-27

不定宽高的元素居中布局解决方案

方案二: 块级元素 + margin: 0 auto;

WebVincent / 0评论 2019-09-18

【基础】这15种CSS居中的方式，你都用过哪几种？

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。利用 text-align: center 可以

cssuperman / 0评论 2018-04-01

【基础】这15种CSS居中的方式，你都用过哪几种？

简言CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。1 水平居中1.1 内联元素水平居中利用 t

ThikHome / 0评论 2019-07-01

CSS垂直居中，你会多少种写法？

CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。不过（水平）垂直居中还是有很多种写法，至少一只手是数不过来了，本文列出几种，并进行简单比较。块级元

Phoebe的学习天地 / 0评论 2019-07-01

css-元素居中

本文重要是汇总了关于水平居中，垂直居中，还有水平垂直居中的各种方法。使用text-align:center;属性可以实现在行内元素在块级父元素水平居中。a.将元素的左右外边距设置为auto。父元素相对定位，子元素绝对定位 left:50%，然后向左移动子元

Phoebe的学习天地 / 0评论 2019-07-01

css实现一个垂直水平居中弹窗的三种方式

width:100%;height:100%;left:0;top:0;position:fixed;background:rgba(0,0,0,0.3);position:absolute;left:50%;top:50%;width:500px;hei

hjfbluesky / 0评论 2019-07-01

CSS - 垂直水平居中方法

行内元素 设置 text-align:center;Flex布局 设置display:flex;justify-content:center;垂直居中设置：。先设置 display:table-cell 再设置 vertical-align:middle；

王为仁 / 0评论 2019-07-01

前端培训-初级阶段（13、18）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂，本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。先来说一下为什么这节课跳课了，不是说中间的我

WebVincent / 0评论 2019-07-01

【HTML/CSS】CSS实现垂直水平居中

相信在工作中经常会遇到需要某某元素垂直水平居中的需求，下面总结一下实现方法元素已知宽度绝对定位 + margin反向偏移html. 当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。

王景迁 / 0评论 2019-07-01

CSS居中总结大全

CSS中居中的几种方式1.水平居中margin：0 auto；块级元素在块级元素中居中设置在子元素上，前提是不受float影响。给它的父元素设置text-aglin：center不会使它在父元素中居中

huakaiwuxing / 0评论 2019-07-01

css居中总结

前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。水平居中行内元素水平居中行内元素的居中比较简单，直接使用text-align就可以达到居中效果/* 行内元素

葉無聞 / 0评论 2019-07-01

css元素居中方法归纳

同理，top和bottom的值相等，即可实现垂直居中。②、margin负值 && 相对定位.inner{. }注意点： ①、inner元素要设为relative②、margin外边距为自身宽高的一半（负数）③、CSS3 transform属

libowen0 / 0评论 2019-06-30

【第1期】聊聊css居中那点事

我们主要从这几个方面来了解下居中：。文字水平居中图片水平居中已知元素宽度的水平居中未知元素宽度的水平居中文字水平居中实现文字的水平居中，是最为简单的了，加上text-align: center;即可，看以下代码：

yezi / 0评论 2019-06-30

CSS常见布局与居中

CSS常用于控制页面布局的定位机制：普通流、相对定位、绝对定位和固定定位。float属性允许你将普通流中的元素在它的包含元素内尽可能的向左或向右排列。你应该设置margin属性来制定浮动元素之间的间距。不同元素的高度和宽度不同，为防止浮动元素的后一元素自动

juzhengqian0 / 0评论 2019-06-29

CSS中的多种居中方式

居中的多种方式flex布局居中是我目前使用最多的一种方式，flex布局也是现在最方便的一种布局，广泛用于pc端和移动端。}grid布局居中grid布局是一种比flex更加强大的布局，但是目前兼用性并不好，我使用的并不多，但也能实现居中。}display:

afeichuanqi / 0评论 2019-06-29

css 元素居中

一：水平居中1、行内元素水平居中在父元素上设置 text-align: center 使文字/图片水平居中。}2、块级元素水平居中先给块级元素设置宽度再给块级元素设置margin：0 auto;.container {. 块级元素如果设置了高度，就不知道如

淡风wisdon大大 / 0评论 2019-06-28

6种不同的CSS实现垂直水平居中

<!DOCTYPE html>. width: 200px;height: 200px;background: #cccccc;margin-top: 10px;display: table-cell;vertical-align: middl

冰蝶 / 0评论 2018-08-17

【基础】这15种CSS居中的方式，你都用过哪几种？

简言CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。1 水平居中1.1 内联元素水平居中利用 t

LiybSunshine / 0评论 2018-04-01

垂直水平居中方法小结

正好看css基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小结。该方法的核心思想是是使用绝对定位布局，使当前元素脱离正常的流体特性，而使用absolute的流体特性

qiupu / 0评论 2019-06-28

【转】CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS. Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对H

Dorissun / 0评论 2016-09-22

css实现居中、自适应

水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法。.child{display: inline-block;}优点：兼容性好；不足：需要同时设置子元素和父元素。.child{display:t

realitycss / 0评论 2019-06-28

小于12px的文本居中问题

前几天在做项目的过程中，关于字体小于12px时，很难做到完全居中显示，表示有点抓狂，各种百度找到一个貌似还不错的方法，总结出来分享给你和我。在PC端的Chrome浏览器中，小于12像素的字体仍然以12像素显示，即使是设置了-webkit-text-size

87241641 / 0评论 2019-06-27

常见面试题—css实现垂直水平居中

常见面试题—css实现垂直水平居中前言面试中常常被问到，如何使用css来实现一个元素的垂直水平方向上居中，特别是笔试题的时候，这道题目的出现频率还是比较高的，当然，在我们的生活中，也常常会有垂直水平居中的需求。}2.容器内元素display:block,且

Phoebe的学习天地 / 0评论 2019-06-27

Css居中div，Css居中img，Css居中文本，Css垂直居中div

width: 100px;margin: 0 auto;display: block;margin-left: auto;margin-right: auto;min-height: 12em;display: table-cell;vertical-al

ThikHome / 0评论 2015-05-27

CSS 水平居中

零散的知识不整理进入自己的知识框架太容易忘，对于CSS脑子里零零散散的！水平居中块级元素水平居中margin：auto此居中的方法前提为居中块级元素宽度必须固定才可设置auto自动计算左右补白。可见块2的margin-left,margin-right设置

王为仁 / 0评论 2019-06-27

页面div居中定位

在编写很多时候页面的时候我们都需要布局居中对齐的，这里引用一个小案例讲解一下水平+垂直居中对齐预期效果

覆雪蓝枫 / 0评论 2019-06-27

css中div垂直居中的方法。

利用flex垂直居中<!

覆雪蓝枫 / 0评论 2019-06-27

CSS居中完全指南——构建CSS居中决策树

本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到CSS居中问题时有章可循.参考Centering in CSS: A Complete Guide和这15种CSS居中的方式，你都用过哪几种本文的引用归原作者所有.代码在线演示工

王为仁 / 0评论 2019-06-27

div居中

今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align:center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟

wenhuadream / 0评论 2014-08-28

css的居中效果、li鼠标悬浮背景颜色从上往下变化、选择器的分类与使用

input[name~=username]选择具有name属性的、并且name的值之一为username的元素 伪类选择器。常用于清除浮动，让浮动的子元素将父撑起来。

jianqi / 0评论 2019-06-26

【基础】这15种CSS居中的方式，你都用过哪几种？

简言CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。1 水平居中1.1 内联元素水平居中利用

afeichuanqi / 0评论 2019-06-26

css的居中

<!DOCTYPE html>. width: 400px;height: 400px;background-color: red;text-align: center;width: 200px;height: 200px;background

gigipop / 0评论 2014-05-30

div居中

今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align:center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟

张大晴 / 0评论 2014-03-02

【前端】这可能是你看过最全的css居中解决方案了~

设置这几个块状的元素display属性为inline-block，并且设置父元素text-align属性为center即可。}5. 垂直居中：单行的行内元素解决方案当一个行内元素，即inline，inline-*类型的元素需要居中的话，可以将它的heigh

尚衍亮 / 0评论 2019-06-26

CSS居中的实现用法实例详解

转载的一篇文章，讲解css内容居中的。网上有关css 居中的文章不胜枚举，不过大多没有做系统的总结。这里分享的这篇有关css居中的文章，个人感觉不错，值得收藏。come on 求水平居中！--text-align:center IE7 6--><

hjfbluesky / 0评论 2013-12-25

input标签文字居中

在页面的input标签中，经常需要将文字垂直居中，网上大多数做法是用vertical-align:middle来控制。有时候会建议用padding属性，但我使用的效果并不理想。今天遇到个可行的方式，就是给input标签设置line-height属性。高度需

福叔 / 0评论 2013-12-19

利用vertical-align:middle实现在整个页面居中

如果想让一个div或一张图片相对于整个页面居中，用vertical-align:middle可以很简单地解决。这是一个404页面，里面就只有一张图片，点击图片可以回到首页，而且这个图片是相对于整个页面居中的，无论是水平还是垂直。9 <

二毛妮子 / 0评论 2013-12-10