水平居中的几种方法

最新推荐文章于 2023-09-30 13:11:25 发布
最新推荐文章于 2023-09-30 13:11:25 发布
阅读量325 收藏
点赞数
分类专栏： 经验总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Linjing127218/article/details/80571824
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/*方法一*/
/*.box{
width:300px;
height:300px;
border:1px solid #ff0;
position:relative;
}
.box1{
width:100px;
height:100px;
background: deepskyblue;
position:absolute;
left:0;
right:0;
top:0;
bottom: 0;
margin:auto;
}*/
/*方法二*/
/*.box{
width:300px;
height:300px;
border:1px solid #ff0;
position:relative;
}
.box1{
width:100px;
height:100px;
background: deepskyblue;
position:absolute;
left:50%;
margin-left:-50px;
top:50%;
margin-top: -50px;
}*/
/*方法三*/
/*.box{
width:300px;
height:300px;
border:1px solid #ff0;
position:relative;
}
.box1{
width:100px;
height:100px;
background: deepskyblue;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}*/
/*方法四*/
.box{
width:300px;
height:300px;
border:1px solid #ff0;
display:flex;
justify-content: center;
align-items: center;
}
.box1{
width:100px;
height:100px;
background: deepskyblue;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
依欣依意127
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
元素水平垂直居中的几种方法
01-20
首先，我们来看第一种方法，通过`margin: auto`实现水平居中，但这种方法无法实现垂直居中。示例代码如下： ```css #box1 { width: 300px; height: 300px; border: 1px black solid; } #box2 { width: 100px; ...
css布局网页水平居中常用方法
10-30
以下我们将深入探讨几种常用的CSS布局网页水平居中的方法。 1. **Text-align 属性** 在IE浏览器中，可以通过设置`body`元素的`text-align`属性为`center`来实现整个页面的水平居中。同时，为了确保内容不被居中，...
CSS水平垂直居中的几种方法总结
09-24
主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。
水平居中的几种方式
mandy' blog
07-04 1873
&lt;!--html--&gt; &lt;body&gt; &lt;div class="box"&gt; &lt;img src="" alt=""&gt; &lt;/div&gt; &lt;/body&gt; 1.水平居中的 margin：0 auto; 用于子元素上的，前提是不受float影响 &amp
web前端面试-------CSS实现水平居中的六种方法
别告诉我有Bug
09-14 2084
效果图： html： &lt;div class="parent"&gt; &lt;div class="child"&gt;&lt;/div&gt; &lt;/div&gt; 1.通过margin: 0 auto; text-align: center实现CSS水平居中。 .parent{ width: 600px; height: 200px; background: ...
水平居中有哪几种方法
xiaoHelloWord的博客
08-13 794
1.给子盒子设置position:absolute;left:50%;top:50%; transform: translate(-50%, -50%); 2.给子盒子设置position:absolute;left:50%;top:50%; margin-left:-盒子一半的宽度；margin-top:-盒子一半高度 3.给子盒子设置position:absolute; left: 0; to...
使一个div垂直+水平居中的几种方法
weixin_33778544的博客
08-05 206
前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这个问题： 思路1：绝对定位居中（原始版） 这个是我回答出来的，也是被各位所熟知的一种方法，设外层div相对定位，内层div绝对定位，top、left分别设为50%，然后通过设置margin-to...
CSS 实现垂直居中的几种方法(必看)
12-13
说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式...
WEB前端CSS居中的几种方法共4页.pdf.zip
10-30
以下将详细讲解几种常用且有效的CSS居中方法。 1. **水平居中** - **Text-align属性**：适用于内联元素或块级元素容器。设置`text-align: center;`可以使容器内的文本和内联元素水平居中。 ```css .container...
水平居中的7个方法
weixin_43989188的博客
01-29 2958
若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 若是块级元素, 该元素设置 margin:0 auto即可.但是该元素一定要有宽度！ 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置: fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器. 4) 使用.
垂直水平居中的几种方法
weixin_45441470的博客
02-28 192
html <div class="box"> <p class="inner">hello word</p> </div> 1flex布局 利用justify-content: center;实现水平居中，aline-items：center实现垂直居中； .box{ width: 300px; height: 300px; background-color: aqua;
CSS中实现元素水平居中、垂直居中的6个方法（详解）
最新发布
xtcbql的博客
09-30 2万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
五种居中方法
qq_39421320的博客
11-18 2507
五种居中方法 一、第一种是将块元素的两个子元素都设置成inline-block行内块元素，一个元素高度等于父元素的高度，使得两个元素基点相互居中。 二、第二种是使用定位和margin:auto来做到水平垂直居中 三、第三种是直接使用弹性盒子水平垂直居中。 四、第四种也是使用定位，先让子元素的左上角位于父元素的正中心，然后根据子元素的宽高用margin调整位置 五、第五种也是用定位，先让子元...
水平居中方法 总结
betty1120的专栏
06-01 404
<br />1.最基本的方式：自动外边距。<br />要求：居中元素为块元素，且宽度固定，使浏览器自动计算左右边距的大小而达到居中的效果。<br />适用于：各主流浏览器，包括标准模式下的ie系列。（怪异模式不支持）div{<br /> margin-left:auto;<br /> margin-right:auto;<br /> 或者<br /> margin:0 auto;<br /> }<br />2.text-align:center方式。<br />要求:在外层容器使用text-ali
水平居中方法
u014651093的专栏
06-27 288
方法1 CSS实现水平和垂直居中 要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。 .mydiv{ width:300px; height:200px; positi
CSS让图片垂直居中的几种技巧
weixin_30412577的博客
12-16 119
在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式...
微信小程序——文字水平垂直居中
知识的海洋
06-29 6918
对于直接在标签里面的文字，使用flex布局控制其中的文字水平和垂直居中
微信小程序：图片水平居中显示
qq_36911138的博客
12-22 1万+
在wxss文件中按下面代码写即可将图片水平居中。 .img1 { margin-top:100rpx; display:flex; justify-content: center; }
Css实现水平居中几种方法
05-27
有以下几种方法可以使用CSS实现水平居中： 1. 使用text-align属性将文本居中。这适用于内联元素和文本块元素。 ```css .parent { text-align: center; } ``` 2. 使用margin属性将元素居中。这适用于块级元素。 ```css .parent { display: flex; justify-content: center; } .child { margin: 0 auto; } ``` 3. 使用absolute和transform属性将元素居中。这适用于绝对定位的元素。 ```css .parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); } ``` 4. 使用flexbox将元素居中。这适用于块级元素。 ```css .parent { display: flex; justify-content: center; align-items: center; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值