CSS如何让一个div水平垂直居中

大家好，我是新来的程序猿小清，在我们前端开发中，经常会让元素水平垂直居中的，现在我来给大家带来以下几种水平垂直居中的方法，如有不如，请谅解

<body><div class = "parent"><div class="son"><div></div>
</body>

  <style>/* 第一种  使用定位家margin-top、margin-left*/.parent{position:relative;width:300px;height:300px;border:1px solid #f00;}.parent .son{/* 通过父相子绝，来实现元素水平居中 top/left: 百分之五十， margin-top/margin-left 各减去高宽一半*/position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;width:100px;height:100px;background-color:#0f0;}/* 第二种定位加 转换属性transform */.parent{position:relative;width:300px;height:300px;border:1px solid #f00;}.parent .son{/* 通过父相子绝，来实现元素水平居中 top/left: 百分之五十transform:translate(-50%，-50%)  向左移动当前元素宽度的一半。向上移动当前元素高度的一半*/position:absolute;top:50%;left:50%;width:100px;height:100px;transform:translate(-50%,-50%)background-color:#0f0;}/* 第三种定位 加margin：auto */.parent{position:relative;width:300px;height:300px;border:1px solid #f00;}.parent .son{/* 通过父相子绝，来实现元素水平居中 top/right/bottom/left: 0margin:auto*/position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100px;height:100px;background-color:#0f0;}/* 第四种flex布局 + margin：auto */.parent{display:flex;width:300px;height:300px;border:1px solid #f00;}.parent .son{/* margin:auto*/margin:auto;width:100px;height:100px;background-color:#0f0;}/* 第五种flex布局 + justift-content:center/  align-items:center*/.parent{display:flex;justify-content:center;align-items:center;width:300px;height:300px;border:1px solid #f00;}.parent .son{width:100px;height:100px;background-color:#0f0;}/* 第六种 使用grid布局 */.parent{display:grid;width:300px;height:300px;border:1px solid #f00;}.parent .son{width:100px;height:100px;background-color:#0f0;justify-self:center;align-self:center}</style>

CSS如何让一个div水平垂直居中相关推荐

如何让一个div水平垂直居中
在工作中经常会碰到让一个div框针对某个模块水平垂直居中针对这种情况有多种方法现在一一实现一下一. div绝对定位水平垂直居中 margin 负间距代码: .box {width: 200 ...
让一个 div 水平垂直居中的几种方法
水平垂直居中有好多种实现方式,主要就分为两类:不定宽高和定宽高,以在body下插入一个div为例: 定宽高使用定位+margin element.style {position: absolute; ...
CSS实现子元素div水平垂直居中
div基本布局 <div class="main"><div class="center"></div>
怎么让一个 div 水平垂直居中
<div class="parent"><div class="child"></div> </div> 方法1 ...
前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...
如何让div水平垂直居中
如何让div水平垂直居中 @(css)[妙瞳] 引子我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE h ...
关于DIV嵌套（二）：div嵌套div水平垂直居中
div嵌套div水平垂直居中可以使用position定位来实现,这是最常用的方法. <!DOCTYPE html> <html><head><meta cha ...
让div水平垂直居中的六种方法
** 方法一:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;) ...
div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法文章目录学习笔记(一) 前言一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四二.flex布局法 1.方法五三.将小div转成行内块 ...

CSS如何让一个div水平垂直居中

大家好，我是新来的程序猿小清，在我们前端开发中，经常会让元素水平垂直居中的，现在我来给大家带来以下几种水平垂直居中的方法，如有不如，请谅解

CSS如何让一个div水平垂直居中相关推荐

最新文章

热门文章