前端-水平垂直居中问题

最新推荐文章于 2023-05-11 09:17:22 发布
最新推荐文章于 2023-05-11 09:17:22 发布
阅读量303 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuyuemozhu/article/details/80834668
版权

效果图：


贴代码：

实现方法一：position + translate 方案

1.

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< meta name= "viewport" content= "width=device-width, initial-scale=1.0">
< meta http-equiv= "X-UA-Compatible" content= "ie=edge">
< title>完全居中</ title>
< style>
#box{
width: 500 px;
height: 500 px;
background: pink;
margin: 0 auto;
position: relative;
}
#con{
width: 200 px;
height: 200 px;
background: yellow;
position: absolute;
top: 50 %;
left: 50 %;
transform: translate( -50 % , -50 %);
}
</ style>
</ head>
< body>
< div id= "box">
< div id= "con"></ div>
</ div>
</ body>
</ html>

2.

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< meta name= "viewport" content= "width=device-width, initial-scale=1.0">
< meta http-equiv= "X-UA-Compatible" content= "ie=edge">
< title>水平垂直居中</ title>
< style>
#box{
width: 500 px;
height: 500 px;
background: yellow;
margin: 0 auto;
}
#con{
width: 200 px;
height: 200 px;
background: pink;
margin: 0 auto;
position: relative;
top: 50 %;
transform: translateY( -50 %);
}
</ style>
</ head>
< body>
< div id= "box">
< div id= "con"></ div>
</ div>
</ body>
</ html>

以上两种大同小异

方案二：flex弹性盒布局

1.

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< meta name= "viewport" content= "width=device-width, initial-scale=1.0">
< meta http-equiv= "X-UA-Compatible" content= "ie=edge">
< title>完全居中</ title>
< style>
#box{
width: 500 px;
height: 500 px;
background: yellow;
margin: 0 auto;
display: flex;
}
#con{
width: 200 px;
height: 200 px;
background: pink;
margin: auto;
}
</ style>
</ head>
< body>
< div id= "box">
< div id= "con"></ div>
</ div>
</ body>
</ html>


2.

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< meta name= "viewport" content= "width=device-width, initial-scale=1.0">
< meta http-equiv= "X-UA-Compatible" content= "ie=edge">
< title>完美居中2</ title>
< style>
#box{
width: 500 px;
height: 500 px;
background: yellow;
margin: 0 auto;
display: flex;
/* flex-direction: column; */
/* justify-content: center; */
align-items: center;
}
#con{
width: 200 px;
height: 200 px;
background: pink;
/* margin: auto; */
margin: 0 auto;
}
</ style>
</ head>
< body>
< div id= "box">
< div id= "con"></ div>
</ div>
</ body>
</ html>


3.

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< meta name= "viewport" content= "width=device-width, initial-scale=1.0">
< meta http-equiv= "X-UA-Compatible" content= "ie=edge">
< title>完美居中2</ title>
< style>
#box{
width: 500 px;
height: 500 px;
background: yellow;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: center; */
}
#con{
width: 200 px;
height: 200 px;
background: pink;
/* margin: auto; */
margin: 0 auto;
}
</ style>
</ head>
< body>
< div id= "box">
< div id= "con"></ div>
</ div>
</ body>
</ html>

以上三种大同小异


具体实现过程不想赘述了，之前懒得整理，今天闲暇之余随手写了下



廉颇易老
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试题--水平垂直居中的方法
weixin_59907064的博客
08-30 318
关于前端面试到的问题：如何实现水平垂直居中的几种常用方法
前端面试--水平垂直居中的问题
m0_68505386的博客
04-15 316
(一)行内元素水平垂直居中 设置text-align:center文本水平居中,在设置行高就可以. (二)块元素水平垂直居中 第一种方法,定位配合 margin:;和position: absolute;必须要有宽高才可以使用 第二种方法,父元素设置flex布局. 第三种方法,不用flex布局,父盒子宽高不确定的情况下 使用position: absolute;和transform: translate 第四种 不用css3变形和flex布局, 父盒子宽高不固定的情况下..
el-dialog水平垂直居中
東三城的博客
04-07 2517
el-dialog水平垂直居中
前端水平垂直居中实现
前方一片光明
04-16 5335
text-align: center; align-items: center; display: -webkit-flex; justify-content: center;
【CSS】前端水平垂直居中的方法
leo的博客
11-09 1669
前端常用的水平垂直居中方法
CSS常见面试题--水平垂直居中
weixin_47032028的博客
09-12 876
面试题：水平垂直居中你知道几种方式？各有什么特点？ 方法一：绝对定位+负值margin法 要点： 1、已知子元素的宽高 2、子元素绝对定位（top:50%,left:50%） 3、子元素负值margin(margin-left,margin-top的负值各为子元素宽高的50%) <!-- 一、绝对定位+负值margin:已知父元素及子元素的宽高 --> <section id="absolute-minus-margin"> <style med..
前端：水平垂直居中的10种方法
江咏之
09-09 1797
第一种： 通过绝对定位的方式 absolute + 负margin ​ 首先知道子元素的宽高，给子元素设置top：50%；left：50%， 但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位， ​ 通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了 优点： 比较好理解，兼容性好 缺点： 需要知道子元素的宽高 第二种： 也是通过绝对定位的方式 absolute + margin auto ​ 这个是
【CSS】元素居中总结-水平居中、垂直居中、水平垂直居中
qq_37219845的博客
02-13 2287
CSS水平、垂直、水平垂直居中总结
css - 盒子水平垂直居中的几种方式
qq_43886365的博客
05-11 1159
前端div盒子水平垂直居中的几种方式: 使用子绝父相，利用css3新增`transform的translate`属性来进行垂直居中； translate可以同时传两个属性，第一个是水平方向移动距离，第二个是垂直方向的移动距离；translate中的%百分比相对的是自身的 ，也就是向左向上走自身的%50来实现居中效果；
前端水平垂直居中的十种方法
新生代农民工
01-05 5706
第1种： 弹性盒子的方式 ​ 通过给父元素设置justify-content: center; ​ align-items: center;就可以了 优点： 移动端使用灵活自如 缺点： pc端需要根据兼容情况来判定 第2种： line-height 只对文本有效果，对定宽高的div是没有用的。所以在文本水平垂直居中时使用。 优点：代码简洁 缺点：只对文本有效，只对单行文本有效，多行文本不可以 第3种： 通过绝对定位的方式 absolute + 负margin ​ 首先知道子元素的宽高，给子元素设置
CSS解决页面图片水平垂直居中问题的方法
01-19
做为一个前端设计人员，对于产品展示...图片水平垂直居中存在的问题 所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），并且图片位居此容器正中间（中间是指元素容器的正
web前端-定位的盒子如何水平和垂直居中
04-02
web前端-定位的盒子如何水平和垂直居中
前端实现元素水平垂直居中的九种方式
06-30
前端实现元素水平垂直居中的九种方式
如何使div垂直水平居中的css代码
09-25
以下将详细讲解几种常用的技术来解决`div`垂直水平居中的问题。 1. **使用`margin`属性** 这是最简单且兼容性较好的方法。首先，在父级元素中设置`TEXT-ALIGN: center;`，这将使父级元素内的所有内联元素水平居中...
关闭vscode烦人的提示框
热门推荐
liuyuemozhu的博客
09-20 3万+
vscode有两种烦人的提示框： 第一种是：鼠标放到html标签上的悬浮提示框，如图： 第二种是：输入的时候有悬浮窗，并不是智能提示的框，而是解释型的提示框，如图： 这两种框基本上都用不到，而且还是英文的提示，日常使用中更加无视，而且面积大小不一，遇到大面积的很是烦人，遮挡视线，需要挪动光标才可以消失。所以专门花费了些时间来处理这个问题。 一：关闭鼠标hover时的悬浮窗： ...
解决webstrom编辑器右上角浏览器图标消失不见的问题
liuyuemozhu的博客
07-07 6644
之前的电脑上安装的版本是WebStorm-2018.1.3，开始时好好的，可以运行HTML文件，右上角也可以显示各个浏览器的图标，但是更新了WebStorm-2018.1.5后，重新打开编辑器，发现编辑器右上角的浏览器图标消失不见了，右击HTML文件也没有open in broswer 选项，但是idea编辑器打开相同的HTML文件完全不受影响，强迫症，表示必须解决webstrom傲娇的问题，上网...
sublime中css输入分号后自动提示的烦恼
liuyuemozhu的博客
09-05 4303
解决sublime中sublimeCodeIntel插件输入分号后自动提示的烦人问题
4种方法解决为 li列表 添加事件问题（for循环经典问题）
liuyuemozhu的博客
09-07 4297
在for循环中，为每个li列表添加事件的时候，总是需要得到每个li对应的下标值，这是就会产生一个问题，这篇博客代码就是分析问题产生的本质和提供了4种方法来解决问题
vscode中js文件和vue文件格式化分号和双引号的问题
liuyuemozhu的博客
02-14 3574
vs code编辑器运行vue项目时，.vue 文件和 .js 文件的规范是：不建议行尾有分号，字符串使用单引号不建议使用双引号的，如果项目中有 eslint 的话，那么就会经常报错。 我的习惯是喜欢打开 format on save （保存及格式化代码）选项，安装了prettier 插件，也在 settings.json 设置了如下： // vue文件默认格式化工具：vetur ...
前端 table 自动居中 和 垂直居中
最新发布
09-19
要实现前端 table 的自动居中和垂直居中，可以通过以下两种方法来实现。 1. 自动居中：可以在 table 的外层容器上设置 CSS 样式，将其设置为居中对齐。可以使用以下的 CSS 样式来实现： ``` table { margin-left: auto; margin-right: auto; } ``` 这样，table 在其容器中会自动水平居中对齐。 2. 垂直居中：在 table 的外层容器上设置 CSS 样式，使其实现垂直居中。采用 flexbox 布局的方式来实现垂直居中。可以使用以下的 CSS 样式来实现： ``` .container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ } ``` 这样，将 table 包含在一个具有 `.container` 类的容器中，table 将在其容器中实现垂直居中并且水平居中。 以上就是实现前端 table 的自动居中和垂直居中的方法。根据具体的需求和页面布局，选择适合的方法来使 table 实现居中对齐。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值