Question

我有一个模拟小旋转器的div块，一切正常但是我所拥有的css配置位于右上翼，我试图将它居中但是当我从移动设备上看它从地方移动..如何在不改变不同尺寸设备位置的情况下使其居中？

.spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

Answer 1

由于它已修复，void Hospital::determinePatientType() { int selection; cout << endl; cout << "What is the patient type?" << endl; cout << "1. Female Inpatient" << endl; cout << "2. Female Outpatient" << endl; cout << "3. Male Inpatient" << endl; cout << "4. Male Outpatient" << endl; cout << endl; cin >> selection; switch(selection) { case 1: patients.push_back(new FemaleIn()); cout << patients.back() << endl; patients[totalPatients]->enterPatientData(); totalPatients++; break; case 2: patients.push_back(new FemaleOut()); cout << patients.back() << endl; patients[totalPatients]->enterPatientData(); totalPatients++; break; case 3: patients.push_back(new MaleIn()); cout << patients.back() << endl; patients[totalPatients]->enterPatientData(); totalPatients++; break; case 4: patients.push_back(new MaleOut()); cout << patients.back() << endl; patients[totalPatients]->enterPatientData(); totalPatients++; break; default: return; } } void Hospital::display(string type) { cout << "Patient Name Spouse Name Sex Patient Type Unit/Appt. Date Diagnosis" << endl; cout << "===================================================================================" << endl; if(type=="All") { for(int i=0;i<patients.size();i++) { patients[i]->toString(); } } else if(type=="Outpatient") { for(int i=0;i<patients.size();i++) { patients[i]->toString(); } } else { for(int i=0;i<patients.size();i++) { patients[i]->toString(); } } }属性与窗口相关。所以百分比的位置，在这种情况下50％应该可以做到这一点。

top|left|right|bottom

替代方案，由Utkanos在评论中提供

.spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 50%;
  right: 50%; /* or: left: 50%; */
  margin-top: -..px; /* have of the elements height */
  margin-right: -..px; /* have of the elements widht */
}

Answer 2

如果您更喜欢微调器覆盖整个视口：

<div class="spinner"></div>

.spinner {
  border: 1px solid;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  margin: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath d='M28.43 6.378C18.27 4.586 8.58 11.37 6.788 21.533c-1.791 10.161 4.994 19.851 15.155 21.643l.707-4.006C14.7 37.768 9.392 30.189 10.794 22.24c1.401-7.95 8.981-13.258 16.93-11.856l.707-4.006z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}

如果您希望它只是gif / svg的大小：

<div class="spinner"></div>

var res = arr1.map(a => {
  return _.assign(a, _.find(arr2, { _id: a._id }));
});

Answer 3

试试transform并定位top和left组合......

注意： 这里我使用了字体真棒只是为了演示

.spinner {
  position: fixed;
  z-index: 1031;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="spinner"><i class="fa fa-spinner fa-spin"></i></div>

Answer 4

尝试此操作以获得所有尺寸的中心位置

.spinner{
    position: absolute;
    margin: auto;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

如何在页面中水平和垂直居中旋转？

4 个答案: