使div在整个页面水品垂直居中的方法

最新推荐文章于 2021-08-08 14:37:47 发布
最新推荐文章于 2021-08-08 14:37:47 发布
阅读量403 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/taomengxing/article/details/79815883
本文介绍了一种使用绝对定位和负外边距实现div元素精确居中的方法。通过设置div的位置属性为absolute，并调整其相对于父容器的位置，再利用负margin值使div元素的中心点对准坐标原点，从而实现水平垂直居中的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先div设置一个宽度和高度，设置div的position为绝对定位。

设置div距离左边的距离为50%，距离上边的距离为50%，因为div的对齐是以div左上角为坐标的，这时我们需要对div设置一个margin值使得div的中心位于坐标原点，设置div的margin-left为一个负值，具体的值为-（div宽度的一半），设置div的margin-top也为一个负值，具体的值为-（div高度的一半）
 


让div垂直居中的5种方法
weixin_30835649的博客
08-03 1876
方法一： 　　这个方法把 div 的显示方式设置为表格，然后我们可以使用表格的 vertical-align property 属性。 HTML & CSS: 1 <div class="wrapper"> 2 <div class="cell"> 3 <div class="content"> 4 ...
div在整个页面实现垂直居中
人生若南柯一梦
12-21 1413
#test{ width:100px; height:100px; position:absolute; left:50%;top:50%; margin:-50px 0 0 -50px; background-color:#000 }
div页面垂直居中方法方法
冷月宫主的专栏
08-16 744
基本思路： （1） 首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二 例子：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。 例子: html PU
div页面垂直居中方法
冷月宫主的专栏
08-16 825
层垂直居中于浏览器，一直是新手朋友比较头疼的问题。   　其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。   　如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现
div水平垂直居中的方法
kang_k的博客
08-01 685
div水平垂直居中的方法*方法1：使用JS实现:兼容全部的浏览器 //->获取当前屏幕的宽度和高度 var winW = document.documentElement.clientWidth || document.body.clientWidth, winH =
DIV在页面中垂直居中的方案
aoxi0033的博客
12-22 132
方案一：纯CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head...
div垂直居中-CSS元素垂直居中方法的探究
06-11
课程提供的两个PDF文件"div垂直居中-CSS元素垂直居中方法的探究-20181030181528302_98662.pdf"和"div垂直居中-CSS元素垂直居中方法的探究-2018103018153623_11191.pdf"很可能是详细的教程资料，包含了具体的代码示例...
CSS网页布局：div垂直居中的各种方法
12-10
在本文中，我们将探讨如何通过不同的方法在网页布局中实现div元素的垂直居中。 首先，我们注意到CSS的`vertical-align`属性并不适用于所有元素。它主要应用于表格元素，如`<td>`、`<th>`和`<caption>`，而不是`<div...
使用css实现div垂直居中的示例
09-25
在网页设计中，让元素居中是常见的需求，特别是对于`div`这样的块级元素，垂直居中有时会显得较为复杂。本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，...
div图片垂直居中 如何使div中图片垂直居中
12-13
在网页设计中，让图片或其他内容在`div`容器中垂直居中是一项常见的需求，尤其在跨浏览器兼容性方面，需要找到优雅且高效的方法。淘宝UED招聘中的一道题目提出了一个挑战：用纯CSS实现未知尺寸（但小于200px）的图片...
css的div垂直居中的方法，百分比div垂直居中
zhouminit的博客
09-11 700
我们都知道，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div，那么这些div如何垂直居中呢？这篇文章，我总结一下。 固定高宽div垂直居中 如上图，固定高宽的很简单，写法如下： position: absolute; left: 50%; top:
CSS在页面布局中实现div垂直居中的方法总结
joerong666
07-16 215
CSS在页面布局中实现div垂直居中的方法总结 2008年07月08日 星期二 01:35 在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”，其实水平居中实现还是比较简单的，反而垂直居中有点麻烦，因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面布局过程中实现垂直居中的方法。     在说到这个问题的时候，也许有人会问CSS中不是有ver...
用CSS使div在整个页面中（水平、垂直）都居中——万能的
weblini的博客
03-31 4381
<style> html,body{ height: 100%; } body{ display: flex; align-items: center; align-content: center; } div { margin:0 auto; } </style>
div垂直居中的几种方法
喜欢做一些demo，和分享遇到的 BUG
07-30 2362
第一种 1. 父类 .father { height:100%; width:100%; display:flex; background-color: red; } 2. 子类 .child { height:40%; width:50%; margin:auto; background-color: blue; } 第二种 1. 父类 .father { height: 100%; width: 100%; position: relative; backg
面试犯的错误1——一个div水平垂直在页面居中怎么实现
weixin_44735018的博客
08-03 180
以下总结了一些我面试过程中犯的一些错误以及纠正与学习 Q1：要让一个div水平垂直在页面居中怎么实现？ 错误示范：我答了一个最无语的，就是给这个div设置为绝对定位，然后 top：0；right:0;left:0;bottom:0;,然后面试官也是一脸不可置信，我也傻了。最最最基础的知识点，我要乱答。 正确回答： 方法一 ：绝对定位：父级是一个相对定位，并且有宽高，也知道子级的宽高，采用top: 50%; left: 50%; transform: translate(-50%,-50%); <st
垂直居中div五种常用方式
空寻的博客
08-08 385
原创不易，求一键三连！！！ 1.运用absolute和calc垂直居中    <style>       *{            padding: 0;            margin: 0;       }        .demo{
div模块垂直水平居中
爬行
10-15 1167
style><!-- #center { height:300px; width:300px; background-color:#cdcdcd; position:absolute;left:50%;top:50%; margin-left:-150px; margin-top:-150px; } -->style>
将Div填充整个网页
weixin_34407348的博客
08-18 177
要想让div填满整个浏览器，至少要让<html>和<body>这两个标签的宽，高为浏览器的100% <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http:/...
CSS-水平居中、垂直居中、水平垂直居中
weixin_34162401的博客
04-01 205
1、水平居中 水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中 这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。 .center{ text-align:center; } <div class="center">...
DIV绝对居中的实现方法与垂直居中技巧解析
在传统的CSS布局中，实现DIV垂直居中是一个挑战，尤其是当DIV的高度未知时。常见的方法包括使用垂直外边距（margin）或使用CSS的transform属性。垂直居中指的是让DIV元素在包含它的父元素内部垂直方向上居中对齐。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值