块级元素水平垂直居中的方法有哪些（三个方法）

朴灿烈づ我的快乐病毒、 2023-01-01 13:55 84阅读 0赞

### 让div等块级元素水平和垂直都居中，即永远处于屏幕的正中央，当我们做如登录块时非常有用！ ###

**实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。**

CSS代码：

.mycss\{

width:300px;

height:200px;

position:absolute;

left:50%;

top:50%;

margin:-100px 0 0 -150px \}

** 实现二原理：利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。**

CSS代码：

.mycss\{

position: absolute;

left: 0px;

right: 0;

top: 0;

bottom: 0;

margin: auto;

height: 200px;

width: 300px;

\}

**jQuery实现水平和垂直居中**

**　原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大 小时，都要执行设置div等块级元素的CSS。**

jquery代码：

$(window).resize(function()\{

$(".myblock").css(\{

position: "absolute",

left: ($(window).width() - $(".myblock").outerWidth())/2,

top: ($(window).height() - $(".myblock").outerHeight())/2     \});

\});

此外在页面载入时，就需要调用resize()方法

$(function()\{

$(window).resize();

\});

发表评论取消回复

表情：

评论列表（有 0 条评论，84人围观）

还没有评论，来说两句吧...

相关阅读

相关块级元素水平垂直居中的方法有哪些（三个方法）

让div等块级元素水平和垂直都居中，即永远处于屏幕的正中央，当我们做如登录块时非常有用！　实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的

朴灿烈づ我的快乐病毒、/ 2023年01月01日 13:55/ 0 赞/ 85 阅读

相关 CSS-水平/垂直居中的方法

[转载原文][Link 1] [可以参考][Link 2] 水平居中块级元素居中 HTML 结构 <div class="parent">

你的名字/ 2022年12月03日 02:25/ 0 赞/ 302 阅读

相关让元素水平垂直居中的四种方法

一、使用flex弹性布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/

曾经终败给现在/ 2022年11月27日 07:09/ 0 赞/ 212 阅读

相关面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

![564b21cd587abfb37d16fa2381a1d6d2.png][] 一、背景在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容

清疚/ 2022年11月16日 15:29/ 0 赞/ 140 阅读

相关 CSS 水平垂直居中的方法

CSS 水平垂直居中的方法 CSS 水平垂直居中的方法水平居中水平垂直居中 HTML文件模板居中元

谁践踏了优雅/ 2022年10月22日 05:25/ 0 赞/ 301 阅读

相关 CSS实现元素水平/垂直居中的方法

首先，我们来了解水平居中,它有很多种方法，我们暂时先来了解其中的几种： 1. 在实现方案中，我们最熟悉的莫过于给元素定义一个宽度，然后使用margin：

本是古典何须时尚/ 2022年07月16日 01:59/ 0 赞/ 348 阅读

相关实现垂直水平居中的方法

因为这一类型题目我面试的时候被问了很多遍，然后就想总结一下吧。大概分了几类。 html代码如下： <div id="parent"> <div i

女爷i/ 2022年06月06日 08:40/ 0 赞/ 656 阅读

相关图片实现水平垂直居中的方法

水平居中：text-align:center 垂直居中：line-height的值同height或vertical-align:middle 让图片在屏幕正中显示的几种方

╰+哭是因爲堅強的太久メ/ 2022年02月25日 13:48/ 0 赞/ 259 阅读

相关块级元素水平垂直居中方法

目录一.脱离文档流 1.有没有宽高都可以 2.必须要有宽高二.没有脱离文档流 1.有无宽高都可 2.有宽高 -------------------- 一.

冷不防/ 2022年02月19日 10:51/ 0 赞/ 291 阅读

相关 div水平垂直居中的方法

在平时，我们经常会遇到让一个div框针对某个模板上下左右都居中(水平垂直居中)，其实针对这种情况，我们有很多种方法实现。方法一：绝对定位法，不确定当前div

本是古典何须时尚/ 2021年07月25日 12:55/ 0 赞/ 571 阅读