常见的div居中对齐方式

前段时间面试的时候面试题里面对css考察最多的就是div居中对齐的问题,因此特地对div居中对齐的方式做了一个简单的总结,本文的目标就是希望各位在以后根据不同的情况使用不同的居中方式,闲话少说,直接上代码

<div class="wrapper">
    <div class="inner"></div>
</div>

Flex布局实现

.wrapper{
    display: flex;
    width: 500px;
    height: 500px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
.wrapper .inner{
    width: 300px;
    height: 300px;
    background-color: #666;
}

父元素display设置为flex,使用flexbox布局,在此布局下的元素就具备了伸缩的特性,再通过justify-content设置元素主轴上的对齐方式center,即可实现水平方向上的对齐,再利用align-items设置侧轴上的对齐方式center,即可实现垂直方向上的对齐

流体特性

 .wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    background-color: #666;
}

当一个绝对定位元素,其对立方向属性同时具有数值时,其流体特性就触发了,margin当两侧的值都是auto时会平分剩余空间的大小,因此当四个方向都是auto时就可以实现水平和垂直方向的居中

transform平移

.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 300px;
    height: 300px;
    background-color: #666;
}

已知宽高绝对定位

.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    margin-top: 50%;
    margin-left: 50%;
    top: -150px;
    left: -150px;
    width: 300px;
    height: 300px;
    background-color: #666;
}

以上内容是个人的一点总结,如果有错误或不严谨的地方,欢迎批评指正,如果喜欢,欢迎点赞收藏

原文地址:https://www.cnblogs.com/jlfw/p/12210738.html

时间: 2024-11-05 13:39:19

常见的div居中对齐方式的相关文章

HTML4如何让一个DIV居中对齐?float输入日志标题

float:left,right clear:both 如何让一个DIV居中对齐? 第一步:设置外层的DIV的text-align:center; 第二步:设置里层的DIV的margin:auto 以上两个DIV都不要设置float.                  

JS控制DIV居中对齐

你真的认为居中对齐那么简单那么我们现在升个级,毕竟要打得怪有点难... <div id="hz_qxalert1_id" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.701961);"><

HTML学习笔记——各种居中对齐

0.前言 水平居中基本方法--指定块的宽度并设定块的左右外边距为auto,上下外边距可取0,那么该块可以在父元素中水平居中. 样式如下: 1:margin:0px auto 2:margin-left:auto; margin-right:auto; 垂直居中基本方法--设定块的上下内边距相等. 样式如下: padding-top:20px; padding-bottom:20px; 1.div居中对齐 [HTML] <!DOCTYPE html> <html> <head&

【CSS】关于div的对齐与网页布局

div布局之所以要学懂学透,是因为table的布局实在是难堪大用,如果是同处于一个表格之内, 各行的规格分布根本就没法调, 例如下面的一段非常简单的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

各种居中对齐

1.div居中对齐 [HTML] <style> #all{ margin:0px auto; width:500px; /* 必须制定宽度 */ height:200px; background-color:blue; } </style> <div id="all"> <div> </div></div> 2.div中文字居中 [HTML] <style> #all{ margin:0px auto

css3实现左右div高度自适应且内容居中对齐

主要运用了css3的弹层布局,直接上代码: 效果:左边盒子宽度固定.内容居中对齐.与右侧盒子高度相等,右侧自动缩放 html: <div class="main"> <div class="left">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题1111</div> <div class="right">内容内容内容内容内容内容内容内容内容内容内容

DIV居中以及设置隐藏的几种方式

PartI DIV居中的常用方法: 1)text-align:center方式 --------------------------html----------------------------- <div class="demo1"> <div class="text1">demo</div> </div> --------------------------css-------------------------

未知宽高元素如何在一个div中上下左右居中对齐

<body> <div id="div1"> <img src="../06图片懒加载/img/img1.png"/> </div></body> 那么,img元素如何在div中居中对齐呢? 第一种方法:第一步:在img标签后面添加一个span元素 <body> <div id="div1"> <img src="../06图片懒加载/img/im

利用CSS实现居中对齐

1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: 1 <div class="parentDiv"> 2 这里随意填写~... 3 </div> 1.1 实现文字水平居中(使用text-align) 对div.parentDiv设置text-align: center;来实现.CSS代码如下: 1 [css] 2 3 .parentDiv { 4 width:200px; 5 height:100p