[英]How do I vertically align a div inside of another div?
I've looked at other posts but they aren't working for me. 我看过其他帖子,但它们对我不起作用。 My website ( http://www.jacksewell.uk/ ) has a modal that fades in when you click the "Hire Me" button. 我的网站( http://www.jacksewell.uk/ )具有一个模式,当您单击“雇用我”按钮时,该模式会逐渐消失。 Currently its not centred vertically but it is centred horizontally. 当前,它不是垂直居中,而是水平居中。 I would like the modal to be centred both horizontally and vertically. 我希望模式可以在水平和垂直方向上居中。 Any help? 有什么帮助吗? Thanks :D 感谢:D
Here the markup and CSS (Sass) for the modal: 这是模态的标记和CSS(Sass):
HTML: HTML:
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Ready to start your next project?</h2>
</div>
<div class="modal-body">
<form action="form_submit.php">
<span id="name">Name: </span><br><input type="text" name="client-name">
<br><br>
<span id="company">Company : </span><br><input type="text" name="company-name">
<br><br>
<span>Service: </span><br><select name="Service">
<option value="Website">Website Devlelopemnt</option>
<option value="Design">Design related tasks</option>
<option value="SEO">SEO Related tasks</option>
<option value="All">Full Package (Website designed & developed with SEO)</option>
</select>
<br><br>
<span id="info">Extra Detail : </span>
<br>
<textarea rows="4" cols="50">Please add more detail about what you are looking for.
</textarea>
<br><br>
<input type="submit">
</form>
</div>
</div>
</div>
CSS (Sass): CSS(Sass):
.modal
display: none
position: fixed
z-index: 1
left: 0
top: 0
width: 100%
height: 100%
overflow: hidden
background-color: black
background-color: rgba(0, 0, 0, 0.5)
.modal-header
text-align: center
.modal-content
background-color: #fefefe
margin: 2vh auto
padding: 20px
border: 1px solid #888
width: 80%
-webkit-animation-name: modal
-webkit-animation-duration: 450ms
animation-name: modal
animation-duration: 450ms
.modal-body
display: flex
flex-direction: column
align-items: center
margin: 24px
span
color: #212121
font-weight: 600
input, select, textarea
border-radius: 5px
padding: 6px 12px 6px 12px
margin: 10px
width: 220px
border: solid 2px #d1d1d1
outline: none
select
width: 250px
input[type=submit]
border-radius: 5px
border: 0
width: 260px
height: 35px
color: #fff
background: #3498db
-webkit-appearance: none
.close
color: rgba(0, 0, 0, 0.5)
float: right
font-size: 28px
font-weight: bold
transition: all ease-in-out 0.25s
&:hover, &:focus
color: #000
text-decoration: none
cursor: pointer
This will do the trick, hope this helps! 这可以解决问题,希望对您有所帮助!
.modal-content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
You can use flexbox. 您可以使用flexbox。 Flexbox is currently not working on IE 9 and 8, but it is fine on every other browser as you can see here . Flexbox当前无法在IE 9和8上运行,但在其他所有浏览器上都可以正常运行,如您在此处所见。
You just have to add this css to your .modal class ( the parent of your .modal-content): 您只需要将此CSS添加到.modal类(.modal-content的父级)中:
.modal {
display: flex;
flex-direction: column;
justify-content: center;
// Your css goes here, without the display:block;
}
For further information on centering things with css, you can check this guide: https://css-tricks.com/centering-css-complete-guide/ 有关使用CSS将内容居中的更多信息,您可以查看以下指南: https : //css-tricks.com/centering-css-complete-guide/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.