使1个div屏幕居中+1个div位于右侧
要使一个div屏幕居中，可以使用以下方法：
- 使用Flexbox布局：将父容器设置为display: flex;，并使用justify-content: center;和align-items: center;来使子元素居中。
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 设置父容器高度为视口高度，使其居中 */
}
</style>
<div class="container">
<div>居中的div</div>
</div>- 使用绝对定位和transform属性：将要居中的div设置为绝对定位，并使用top: 50%;和left: 50%;将其定位到屏幕中心，然后使用transform: translate(-50%, -50%);将其向左上方移动自身宽度和高度的一半。
<style>
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="centered">
<div>居中的div</div>
</div>要使一个div位于右侧，可以使用以下方法：
- 使用Flexbox布局：将父容器设置为display: flex;，并使用justify-content: flex-end;将子元素靠右对齐。
<style>
.container {
display: flex;
justify-content: flex-end;
}
</style>
<div class="container">
<div>位于右侧的div</div>
</div>- 使用绝对定位和right属性：将要位于右侧的div设置为绝对定位，并使用right: 0;将其定位到父容器的右侧。
<style>
.right-aligned {
position: absolute;
right: 0;
}
</style>
<div class="right-aligned">
<div>位于右侧的div</div>
</div>以上是两种常用的方法，根据具体需求和布局情况，选择适合的方法即可。
相关·内容
我有一个既包含图像又包含一些文本的容器。我想要的文本是垂直和水平居中的图像。
似乎最简单、最具前瞻性的方法是使用Flexbox和文本的绝对定位：
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.text {
position: absolute;
}
<div class='container'>
<div class='text'>
This should
浏览 5提问于2017-06-08得票数 9
回答已采纳
我有一个标题元素，我想要显示flex列，这样我就可以垂直居中.container分区。这工作得很好。然后我需要.container中的项目在1200px上以均匀的间距排成一行。你不能在flex容器中做flex容器去不同的方向吗？请看下面我的css：
header {
height: 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding:
浏览 10提问于2020-03-14得票数 2
回答已采纳
我使用CSS引导程序4，在容器内每行有多列。根据屏幕大小，这些列可以相互叠加，使容器更高，有时超出了屏幕上显示的范围，需要滚动。我似乎想不出办法来满足这两种条件：
如果容器比浏览器窗口的高度短，如果容器比浏览器窗口高，则在屏幕中央的中居中，不要对容器进行中心(这样它就不会离开屏幕)。
下面我有代码将容器居中，但是当文本行数比屏幕高时，它就会因为.centered而关闭屏幕，不能像普通页面那样滚动。
以下是我的HTML：
<div class="container centered" style="width: 100%">
<div c
浏览 4提问于2019-12-01得票数 3
回答已采纳
1回答
我真的很难理解flex是如何工作的，我在这支笔中的目标是什么。
是将“单击iframe外的我”按钮对齐到iframe的右限制，但在"next line“中。
我可以对齐它，但当我没有对中心的iframe容器，如果这是有意义的。理想情况下，我希望iframe中心和按钮对齐它的右边。
html是：
<div class="container">
<div class="container-center ">
<div class="center ">
<iframe srcd
浏览 1提问于2018-02-13得票数 0
回答已采纳
我如何才能在保持.centred居中的同时，将.right一直向右推？(它不需要使用flex，但我需要在移动视图中保持.centred高于.right )
<div class="flex">
<div class="centred">
<div class="a">asdfasdf</div>
<div class="b">asdfasdf</div>
</div>
浏览 11提问于2017-02-08得票数 1
回答已采纳
3回答
我有这个柔印箱，用来垂直中间两行文字。这两行文字相距太远。下面是我所说的一幅图片：
这是我的代码：
CSS
.vertical-center {
min-height: 100%; /* Fallback for vh unit */
min-height: 100vh; /* You might also want to use
'height' property instead.
Note that for percentage values of
浏览 2提问于2016-01-10得票数 6
回答已采纳
我有一个柔性盒行容器，图标的宽度不指定为左侧的flex项，第二个flex项为多行文本块。
问题是，我希望这个文本位于柔性盒容器的正中，此时它被第一个flex项目推到左边。
居中的一种方法是将文本框的右边与图标的宽度相同，例如使用边距-右。
或者我可以在文本上设置一个:after元素来向右边添加另一个flex框？做这件事最好的方法是什么？
例如。
<div style="display: flex; width: 10em; align-items: center; border:1px solid blue; text-align:center">
<a st
浏览 8提问于2017-05-16得票数 1
我设置了特定的宽度，并且我的flex项上没有margin: auto，但是由于某些原因，这些属性不能像预期的那样工作。
我只需要头箱和list类之间的间距。
现在在我的com上头箱是居中的，但在代码片段上不是，我不确定为什么，即使justify-content被设置为居中。
但即使在我的电脑上，align-items也不能正常工作。
我的意思是，我知道它没有效果，但那只是如果只有一项的话。
我还注释掉了一些常见的疑点，但这不起作用。
最后，right实际上是更大的容器div的一部分，但这应该是无关紧要的。如果你为这段代码做了一个完整的页面，你就会明白我在说什么。
.right {
di
浏览 0提问于2016-07-24得票数 4
回答已采纳
2回答
我想知道为什么我放在这个带有display flex的div容器中的任何图像都会自动伸展出来？如果我要为它设置宽度，我不能用justify-content居中。
#container {
display: flex;
justify-content: center;
}
#container div {
padding: 25px;
background: blue;
color: white;
width: 500px;
display: flex;
flex-direction: column;
}
#container div h1 {
dis
浏览 0提问于2018-03-12得票数 0
这是应用在div上的样式，使组件(按钮)居中在botton中，而不知道将占用div的剩余空间的大小和按钮的大小，因为此样式将是通用的。
我使用了这种风格，但它对我不起作用：
<div location="buttonLayout" style="display:flex; justify-content:center; align-items:flex-end ;"></div>
按钮居中，但不放在父div剩余空间的底部。
浏览 3提问于2016-05-06得票数 0
我正在尝试使用flexbox创建一个标题，其中包含了3个div:左侧=导航，中间=徽标，右侧=社交图标/链接。我遇到的问题是，我的标题中的每个div都不是均匀的，所以徽标不是直接集中在标头上。
我想如果我把flex属性设置为1，那么每个部分都有相同的宽度。
这是我的密码：
<html>
<head>
<style>
*, *:before, *:after {
box-sizing:border-box;
}
body {margin: 0}
.header {
display: -webkit-box;
display: -
浏览 0提问于2015-08-12得票数 0
回答已采纳
2回答
我有一个绝对定位的div。
我正在尝试将其与flex垂直对齐：
.container{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
....
HTML：
<div class="container">
<div>
<p>hello</p>
<p>to</p>
<p>you</p&
浏览 0提问于2016-06-02得票数 9
回答已采纳
1回答
我有一个容器，它有一个表和一个div，其中display设置为flex，flex-direction设置为column。
我想使div中心水平对齐。这是代码
<style>
.container {
display: flex;
flex-direction: column;
border: 1px solid red;
}
.mytable {
width: 100%
}
table,
th,
td {
border: 1px solid b
浏览 0提问于2018-04-11得票数 5
我有一个像这样的html布局：
<div class="container">
<div class="content">
// content goes here
</div>
</div>
我已经向容器div申请了100vh。我需要将内容垂直居中。我发现如果我将以下CSS应用于容器和内容，我可以将content div中的所有内容垂直居中，但我想知道这是不是一种糟糕的做法，我是否应该做一些其他的事情？
display: flex;
justify-content: center;
align-i
浏览 30提问于2018-08-28得票数 1
回答已采纳
我有一个相当基本的flex设置，不管出于什么原因，这个div不会垂直地在它的父标记中居中。您可以看到下面的隔离测试用例。
.likeness-rank-table {
border-radius: 3px;
margin-bottom: 20px;
display: block;
}
.likeness-rank-table .col {
box-sizing: border-box;
text-align: center;
position: relative;
flex: 1;
max-width: 20%;
min-height: 50px;
浏览 3提问于2016-05-02得票数 3
回答已采纳
1回答
我使用Flexbox模型开发了以下布局：
html {
box-sizing: border-box;
overflow-y: none;
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
#all {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: #03a9f4;
}
#app
浏览 4提问于2016-11-06得票数 1
回答已采纳
我试着在左边，中间和右边有一个盒子--但是它都是在css中连接到主体的。我不确定我做错了什么，因为我是新手，这是我第一次尝试从头开始创建我自己的代码，而不是复制我找到的代码。谢谢!
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="portfolio.css">
<div class="container">
<div class="header"></div&
浏览 0提问于2020-10-26得票数 0
1回答
我需要我的元素在一行中，居中的高度，并有右水平对齐在有界块。我试着使用flexbox来解决这个问题，所有的东西都只适用于一行项目，否则溢出的元素会占用所有可用的空间，并且它看起来不会正确对齐。
.flex {
width:80px;
display: flex;
align-items: center;
justify-content: flex-end;
}
span {
text-align:right;
}
<div class="flex">
<i>0</i>
<span>
g
浏览 8提问于2016-08-15得票数 0
1回答
以下代码在Chrome和大多数现代浏览器中将视频垂直和水平居中，但Safari除外，在Safari中视频只是垂直居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
浏览 0提问于2016-07-22得票数 4
回答已采纳
我对超文本标记语言和css很陌生，但似乎不能理解为什么justify-content不能正常工作。内联代码块似乎确保了.navbar_wrapper没有100%的宽度，<a>链接元素也没有max-width，所以我不确定为什么它们根本没有间隔，或者没有受到header flex容器的影响。 @import url('https"//fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
p
浏览 58提问于2021-02-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
