div垂直水平居中经常使用的方法

通过定位:

  父级元素:position: relative;

  子元素:

       position: absolute;

      top:50%;

      left:50%;

      transform: translate(-50%,-50%);  // 在不确定自身的高度时

      margin: -100px 0 0 -200px;   //  确定自身的高度时,margin-top:负的自生高度一半;margin-left:负的自生宽度一半;

使用弹性盒子

  父级元素:display: flex;

         align-items: center;

       justify-content: center;

使用 display: table-cell;

  父级元素: display: table-cell;

       vertical-align: middle;

  子元素: margin:0 auto;

原文地址:https://www.cnblogs.com/yehongrun/p/9639570.html

时间: 2024-08-08 09:38:23

div垂直水平居中经常使用的方法的相关文章

jQuery实现的div垂直水平居中实例代码

jQuery实现的div垂直水平居中实例代码:在窗口中有一个div元素,下面就介绍一下如何使用jQuery将其设置为水平垂直居中对齐,希望能够给需要的朋友带来一定的帮助.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&quo

css实现垂直水平居中的5种方法

css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; border:1px solid #000; display: table-cell; text-align: center; vertical-align: middle; } #small{ display: inline-block; width: 50px; height: 50px; backgro

div垂直水平居中实例代码

div垂直水平居中实例代码:关于让div垂直水平居中的效果太多了,这里就不介绍了,废话不多说,直接给出代码.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>垂直水平居中代码&l

垂直水平居中的几种方法

1,(元素在容器中垂直水平居中) css: .box{width:800px;height:800px;background:#ccc;display:flex;justify-content:center;align-items:center;} .box div{width:300px;height:300px;background:red;} html:  <div class="box"> <div></div> </div> 2

css div垂直水平居中实现

比如设置html中下面的div为垂直水平居中,则 <div id="box"></div> css样式 #box{ width: 300px; height: 200px; margin-left: -150px;//宽度的一半,很重要,不然不居中,会偏右 margin-top: -100px;//高度的一半 position: absolute;//绝对定位方式 top: 50%; left: 50%; background-color: aqua;//背景颜

任意长宽度子div在任意长宽度父div垂直水平居中

<DocType html><html>    <head>        <title>任意长宽度高度垂直水平居中div</title>        <style>            .parentDiv{                width:500px;<!-- 长宽可以改变-->                height:500px;                margin:0 auto;     

DIV垂直水平居中

1.div{ display:table-cell; text-align:center; vertical-align:middle;}.div1{ display:inline-block;}/*子div不能设置浮动*/ 2..div{ display:flex; align-items:center; /*垂直居中*/ justify-content: center; /*水平居中*/}/*兼容性不好,不推荐*/ 3..div1{ transform:translate(-50%,-50%

让div垂直水平居中的方法

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .myt { 8 /* background:red url(images/img2.jpg) center center/500px 200px no-repeat;*/ 9 background:red url

前端开发入门到实战:css实现div垂直水平居中的2种常用方法

方法一: 利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件: 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align:middle 此方法在开发中不能右浮动(不能靠右边) 下方是完整代码,可以新建一个HTML文件进行测试(绿色的盒子): <html> <head> <title>导航条</title&g