HTML5/CSS3基础——div盒子水平垂直居中的三种方案

一、基于定位的使div盒子水平居中的三种方式
- 1、使用top:50% left:50% 以及margin-top 和 margin-left 来进行定位
- 2、使用top:50% left:50% 以及 transform: translate(-50%,-50%);
- 3、使用top:0 left:0 right:0 bottom:0 以及 margin:auto
二、使用Flex 布局使div盒子水平居中
三、使用js的方式使div盒子水平居中

如何使盒子水平垂直居中，是我们在写页面布局经常能遇到的问题之一。以前我的我每次需要用到水平垂直居中的时候都会百度，每次百度总是又能找到不同的方式而且还记不住:( 但今天就写系统的总结和整理了一下我们使div盒子水平垂直居中的方式到底有哪些跟我之前有着一样困惑的小伙伴一起来看吧～～

我们的html是这样滴：

<body>
<div class="box" id="box">水平垂直居中方案</div>
</body>

一、基于定位的使div盒子水平居中的三种方式

1、使用top:50% left:50% 以及margin-top 和 margin-left 来进行定位

注意： 必须知道盒子的具体的宽和高，否则无法计算margin的值

.box{/* 盒子长为200，宽为100 背景为海蓝色*/height:100px;width:200px;background-color: aquamarine;position: absolute; /* 注意这是指盒子的左顶点在页面的中心 */top:50%;left:50%; margin-top:-50px;  /* 盒子要向上移动自己高度的50% */margin-left:-100px;/* 盒子要向左移动自己宽度的50% */}html,body{position: relative;height:100%; margin:0;}

2、使用top:50% left:50% 以及 transform: translate(-50%,-50%);

来进行定位
注意： 跟上一种相比，不需要宽和高，内容就会撑开盒子，但是兼容性差

.box{/* 盒子长为200，宽为100 背景为海蓝色*/height:100px;width:200px; background-color: aquamarine;position: absolute; top:50%;left:50%;/* 根据自有的宽度分别向上移和像左移动50% */transform: translate(-50%,-50%);}html,body{position: relative;height:100%; margin:0;}

3、使用top:0 left:0 right:0 bottom:0 以及 margin:auto

注意： 盒子必须有宽和高，但不会用到宽和高进行具体的计算

 .box{/* 盒子长为200，宽为100 背景为海蓝色*/height:100px;width:200px;background-color: aquamarine;position: absolute; top:0;left:0;right:0;bottom:0;margin:auto; }html,body{position: relative;height:100%; margin:0;}

二、使用Flex 布局使div盒子水平居中

 .box{/* 盒子长为200，宽为100 背景为海蓝色*/height:100px;width:200px;background-color: aquamarine;}html,body{height:100%; margin:0;display: flex;/* 主轴位于中间 */justify-content:center ;/* 交叉轴位于中间 */align-items: center;}

三、使用js的方式使div盒子水平居中

水平居中方法：将浏览器可视区的宽度(clientWidth) 减去要居中元素本身的宽度(offsetWidth) /除以 2 +‘px’
垂直居中方法：将浏览器可视区的高度(clientHeight) 减去要居中元素本身的高度(offsetHeight) /除以 2 +‘px’

window.onload = function(){//var box =document.getElementById('box');let HTML =document.documentElement,winW=HTML.clientWidth,winH=HTML.clientHeight,boxW=box.offsetWidth,boxH=box.offsetHeight;box.style.position="absolute";box.style.left=(winW-boxW)/2+'px';box.style.top=(winH-boxH)/2+'px';}

HTML5/CSS3基础——div盒子水平垂直居中的三种方案相关推荐

div盒子水平垂直居中的几种方式
1. div水平居中 div{width:100px;height:100px;margin:0 auto; } 2. div水平垂直居中这里要有两层或者给body设置高度100vh,然后给元素设置 ...
html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
CSS实现div盒子水平垂直居中的方式
网上看到有很多方式,这里记录一下我用起来顺手的几种方式,这里敲黑板做笔记,哈哈~~ <div id='container'><div class='middle'></d ...
如何将一个div盒子水平垂直居中?
1: 第一种方法: <div class="parent"> // 父级盒子<div class="child"><div> ...
div盒子水平垂直居中的方法
一.盒子没有固定的宽和高方案1.Transforms 变形这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义transform: translate(-50%, ...
css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法文本(文字)内容属于行内元素行内元素水平垂直居中方法方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...
如何实现div盒子水平垂直居中
关于如何使一个小盒子在大盒子中水平垂直居中有很多方法,下面将列举常用的几种: ###html 代码 <div class="parent"><div class= ...

HTML5/CSS3基础——div盒子水平垂直居中的三种方案

HTML5/CSS3基础——div盒子水平垂直居中的三种方案

一、基于定位的使div盒子水平居中的三种方式

1、使用top:50% left:50% 以及margin-top 和 margin-left 来进行定位

2、使用top:50% left:50% 以及 transform: translate(-50%,-50%);

3、使用top:0 left:0 right:0 bottom:0 以及 margin:auto

二、使用Flex 布局使div盒子水平居中

三、使用js的方式使div盒子水平居中

HTML5/CSS3基础——div盒子水平垂直居中的三种方案相关推荐

最新文章

热门文章